ng-components-tsi 0.0.76 → 0.0.77
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 +210 -208
- package/fesm2022/ng-components-tsi.mjs.map +1 -1
- package/lib/modals/general/md-generico/md-generico.component.d.ts +2 -2
- package/lib/models/button-color.model.d.ts +1 -1
- package/lib/ui/tables/table-ultimate/table-ultimate.component.d.ts +3 -3
- package/package.json +1 -1
|
@@ -36,10 +36,10 @@ class AtajosDirective {
|
|
|
36
36
|
this.emitirAtajo.emit();
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
40
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
39
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AtajosDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
40
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: AtajosDirective, isStandalone: true, selector: "[atajoTecla]", inputs: { altKeyCombination: { classPropertyName: "altKeyCombination", publicName: "altKeyCombination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitirAtajo: "emitirAtajo" }, host: { listeners: { "window:keydown": "onKeyDown($event)" } }, ngImport: i0 });
|
|
41
41
|
}
|
|
42
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
42
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AtajosDirective, decorators: [{
|
|
43
43
|
type: Directive,
|
|
44
44
|
args: [{
|
|
45
45
|
selector: '[atajoTecla]'
|
|
@@ -268,7 +268,7 @@ class ButtonComponent {
|
|
|
268
268
|
getWidthClass() {
|
|
269
269
|
return this.isFullWidth() ? 'w-100' : 'w-auto w-sm-100';
|
|
270
270
|
}
|
|
271
|
-
iconsWithImage = ['sunat', 'bcp', 'ibk', 'bbva', 'bnacion'];
|
|
271
|
+
iconsWithImage = ['sunat', 'bcp', 'ibk', 'bbva', 'bnacion', 'banbif', 'scotia'];
|
|
272
272
|
isImageIcon = (icon) => this.iconsWithImage.includes(icon);
|
|
273
273
|
getImageName = () => {
|
|
274
274
|
const imageIcon = {
|
|
@@ -276,16 +276,18 @@ class ButtonComponent {
|
|
|
276
276
|
'bcp': 'BCP.svg',
|
|
277
277
|
'ibk': 'IBK.svg',
|
|
278
278
|
'bbva': 'BBVA.svg',
|
|
279
|
-
'bnacion': 'BNACION.svg'
|
|
279
|
+
'bnacion': 'BNACION.svg',
|
|
280
|
+
'banbif': 'BANBIF.svg',
|
|
281
|
+
'scotia': 'SCOTIA.svg'
|
|
280
282
|
};
|
|
281
283
|
return `assets/images/${imageIcon[this.icon()]}`;
|
|
282
284
|
};
|
|
283
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
284
|
-
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 }, variante: { classPropertyName: "variante", publicName: "variante", 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 }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", 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 }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", 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 [style.min-width.px]=\"minWidth()\"\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)\" [multiple]=\"isMultiple()\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n</button>\r\n}", styles: [".btn-modern{position:relative;isolation:isolate;border-radius:5px!important;font-size:12px;padding-top:5px;padding-bottom:5px;font-weight:500;letter-spacing:.2px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .25s ease,filter .25s ease,transform .06s ease;will-change:transform,filter}.btn-modern:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(var(--focus-color-rgb, 0, 123, 255),.45),0 6px 20px rgba(var(--focus-color-rgb, 0, 123, 255),.3)}.btn-modern:active{transform:scale(.95);filter:brightness(.95);box-shadow:inset 0 3px 6px #00000047,inset 0 1px 2px #00000038}.btn-modern>*{position:relative;z-index:1}.btn-link-modern{border:none!important;background-color:transparent!important;box-shadow:none!important;border-radius:5px!important;font-size:12px;padding-top:8px;padding-bottom:8px;font-weight:500;letter-spacing:.2px;color:rgb(var(--focus-color-rgb, 0, 123, 255))!important;transition:background-color .2s ease,filter .15s ease,transform .06s ease}.btn-link-modern:hover{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.1)!important;filter:brightness(1.08)}.btn-link-modern:active{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.18)!important;transform:scale(.97)}@media (prefers-reduced-motion: reduce){.btn-modern,.btn-modern:before{transition:none}}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1.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"] }] });
|
|
285
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
286
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ButtonComponent, isStandalone: true, selector: "app-button", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", 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 }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", 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 }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", 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 [style.min-width.px]=\"minWidth()\"\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)\" [multiple]=\"isMultiple()\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n</button>\r\n}", styles: [".btn-modern{position:relative;isolation:isolate;border-radius:5px!important;font-size:12px;padding-top:5px;padding-bottom:5px;font-weight:500;letter-spacing:.2px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .25s ease,filter .25s ease,transform .06s ease;will-change:transform,filter}.btn-modern:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(var(--focus-color-rgb, 0, 123, 255),.45),0 6px 20px rgba(var(--focus-color-rgb, 0, 123, 255),.3)}.btn-modern:active{transform:scale(.95);filter:brightness(.95);box-shadow:inset 0 3px 6px #00000047,inset 0 1px 2px #00000038}.btn-modern>*{position:relative;z-index:1}.btn-link-modern{border:none!important;background-color:transparent!important;box-shadow:none!important;border-radius:5px!important;font-size:12px;padding-top:8px;padding-bottom:8px;font-weight:500;letter-spacing:.2px;color:rgb(var(--focus-color-rgb, 0, 123, 255))!important;transition:background-color .2s ease,filter .15s ease,transform .06s ease}.btn-link-modern:hover{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.1)!important;filter:brightness(1.08)}.btn-link-modern:active{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.18)!important;transform:scale(.97)}@media(prefers-reduced-motion:reduce){.btn-modern,.btn-modern:before{transition:none}}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1.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"] }] });
|
|
285
287
|
}
|
|
286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
287
289
|
type: Component,
|
|
288
|
-
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 [style.min-width.px]=\"minWidth()\"\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)\" [multiple]=\"isMultiple()\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n</button>\r\n}", styles: [".btn-modern{position:relative;isolation:isolate;border-radius:5px!important;font-size:12px;padding-top:5px;padding-bottom:5px;font-weight:500;letter-spacing:.2px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .25s ease,filter .25s ease,transform .06s ease;will-change:transform,filter}.btn-modern:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(var(--focus-color-rgb, 0, 123, 255),.45),0 6px 20px rgba(var(--focus-color-rgb, 0, 123, 255),.3)}.btn-modern:active{transform:scale(.95);filter:brightness(.95);box-shadow:inset 0 3px 6px #00000047,inset 0 1px 2px #00000038}.btn-modern>*{position:relative;z-index:1}.btn-link-modern{border:none!important;background-color:transparent!important;box-shadow:none!important;border-radius:5px!important;font-size:12px;padding-top:8px;padding-bottom:8px;font-weight:500;letter-spacing:.2px;color:rgb(var(--focus-color-rgb, 0, 123, 255))!important;transition:background-color .2s ease,filter .15s ease,transform .06s ease}.btn-link-modern:hover{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.1)!important;filter:brightness(1.08)}.btn-link-modern:active{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.18)!important;transform:scale(.97)}@media
|
|
290
|
+
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 [style.min-width.px]=\"minWidth()\"\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)\" [multiple]=\"isMultiple()\" [disabled]=\"disabled()\"\r\n class=\"d-none\">\r\n</button>\r\n}", styles: [".btn-modern{position:relative;isolation:isolate;border-radius:5px!important;font-size:12px;padding-top:5px;padding-bottom:5px;font-weight:500;letter-spacing:.2px;box-shadow:0 2px 4px #0000001a;transition:box-shadow .25s ease,filter .25s ease,transform .06s ease;will-change:transform,filter}.btn-modern:hover{filter:brightness(1.05);box-shadow:0 4px 12px rgba(var(--focus-color-rgb, 0, 123, 255),.45),0 6px 20px rgba(var(--focus-color-rgb, 0, 123, 255),.3)}.btn-modern:active{transform:scale(.95);filter:brightness(.95);box-shadow:inset 0 3px 6px #00000047,inset 0 1px 2px #00000038}.btn-modern>*{position:relative;z-index:1}.btn-link-modern{border:none!important;background-color:transparent!important;box-shadow:none!important;border-radius:5px!important;font-size:12px;padding-top:8px;padding-bottom:8px;font-weight:500;letter-spacing:.2px;color:rgb(var(--focus-color-rgb, 0, 123, 255))!important;transition:background-color .2s ease,filter .15s ease,transform .06s ease}.btn-link-modern:hover{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.1)!important;filter:brightness(1.08)}.btn-link-modern:active{background-color:rgba(var(--focus-color-rgb, 0, 123, 255),.18)!important;transform:scale(.97)}@media(prefers-reduced-motion:reduce){.btn-modern,.btn-modern:before{transition:none}}.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"] }]
|
|
289
291
|
}], ctorParameters: () => [], propDecorators: { fileInput: [{
|
|
290
292
|
type: ViewChild,
|
|
291
293
|
args: ['fileInput']
|
|
@@ -340,10 +342,10 @@ class ToastService {
|
|
|
340
342
|
setTimeout(() => this.remove(id), 10000);
|
|
341
343
|
return id;
|
|
342
344
|
}
|
|
343
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
344
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
345
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
346
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
345
347
|
}
|
|
346
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
348
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToastService, decorators: [{
|
|
347
349
|
type: Injectable,
|
|
348
350
|
args: [{
|
|
349
351
|
providedIn: 'root'
|
|
@@ -443,10 +445,10 @@ class AlertConfirmationComponent {
|
|
|
443
445
|
closeModal() {
|
|
444
446
|
this.activeModal.close();
|
|
445
447
|
}
|
|
446
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
447
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
448
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
449
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AlertConfirmationComponent, isStandalone: true, selector: "app-alert-confirmation", inputs: { selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOptionChange" }, ngImport: i0, template: "<div class=\"alert-confirm-container\">\n\n\n <div class=\"alert-confirm-content\">\n\n <div class=\"icon-wrapper\">\n <div class=\"icon-circle\">\n <i class=\"fas fa-exclamation-triangle\"></i>\n </div>\n <div class=\"icon-badge\">\n <i class=\"fas fa-exclamation text-warning\"></i>\n </div>\n </div>\n\n <h2 class=\"error-title\">{{ title() }}</h2>\n\n <div class=\"confirm-message\" [innerHTML]=\"textoFormateado()\"></div>\n\n @if(select()){\n <div class=\"select-wrapper\">\n @if (showLabel()) {\n <label class=\"select-label\">Motivo:</label>\n }\n <select class=\"form-select\" [(ngModel)]=\"selectedOption\">\n @for(opt of opcionesFormateadas(); track $index){\n <option [value]=\"opt.codigo\">{{ opt.descri }}</option>\n }\n </select>\n </div>\n }\n\n @if(showTextarea() && mostrarTextareaComputed()){\n <div class=\"textarea-wrapper\">\n <textarea class=\"form-control\" placeholder=\"Ingresar motivo...\" [(ngModel)]=\"textareaValueModel\"\n (ngModelChange)=\"onTextareaChange($event)\" [maxlength]=\"maxLength()\">\n </textarea>\n <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\n Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\n </div>\n </div>\n }\n </div>\n\n\n <div class=\"actions\">\n @if(mostrarConfirmar()){\n <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"focus()\" [minWidth]=\"100\" />\n }\n @if(mostrarExtra()){\n <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\n }\n @if(mostrarCancelar()){\n <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" [autoFocus]=\"!focus()\" [minWidth]=\"100\" />\n }\n </div>\n\n <div class=\"fw-bold fs-6 mt-4 d-inline-flex px-3 py-1 rounded d-flex align-items-center gap-2\"\n style=\"background: rgba(128, 128, 128, 0.185);\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n Por favor, selecciona cuidadosamente. Esta acci\u00F3n es irreversible.\n </div>\n\n</div>", styles: [".alert-confirm-container{border-radius:16px;display:flex;flex-direction:column;max-height:85vh;overflow:hidden;padding-bottom:32px}.alert-confirm-container>div:last-child{align-self:center;padding:0 30px}.alert-confirm-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:40px 30px 24px;text-align:center}.alert-confirm-content::-webkit-scrollbar{width:5px}.alert-confirm-content::-webkit-scrollbar-track{background:transparent}.alert-confirm-content::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:3px}@keyframes confirmEntrance{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes confirmPulse{0%,to{box-shadow:0 8px 24px #b4780059}50%{box-shadow:0 8px 32px #b47800a6,0 0 0 10px #b4780012}}@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,#fbbf24,#d97706);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #b4780059;animation:confirmEntrance .5s cubic-bezier(.36,.07,.19,.97) both,confirmPulse 2.4s ease-in-out .5s infinite}.icon-circle i{color:#fff;font-size:34px;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{font-size:11px;font-weight:900}.confirm-message{font-size:.95rem;color:#6b7280;line-height:1.6;margin-bottom:24px}.select-wrapper{display:flex;align-items:center;gap:8px;margin-bottom:16px;text-align:left}.select-wrapper .select-label{font-size:.875rem;font-weight:600;color:#374151;white-space:nowrap;margin-bottom:0}.textarea-wrapper{margin-bottom:16px;text-align:left}.textarea-wrapper .form-control{min-height:100px;resize:vertical}.character-counter{font-size:.75rem;color:#9ca3af;text-align:right;margin-top:4px}.color-caracter{color:#d97706!important}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 30px}.actions app-button{min-width:110px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], outputs: ["accion", "fileSelected"] }] });
|
|
448
450
|
}
|
|
449
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertConfirmationComponent, decorators: [{
|
|
450
452
|
type: Component,
|
|
451
453
|
args: [{ selector: 'app-alert-confirmation', imports: [CommonModule, FormsModule, ButtonComponent], template: "<div class=\"alert-confirm-container\">\n\n\n <div class=\"alert-confirm-content\">\n\n <div class=\"icon-wrapper\">\n <div class=\"icon-circle\">\n <i class=\"fas fa-exclamation-triangle\"></i>\n </div>\n <div class=\"icon-badge\">\n <i class=\"fas fa-exclamation text-warning\"></i>\n </div>\n </div>\n\n <h2 class=\"error-title\">{{ title() }}</h2>\n\n <div class=\"confirm-message\" [innerHTML]=\"textoFormateado()\"></div>\n\n @if(select()){\n <div class=\"select-wrapper\">\n @if (showLabel()) {\n <label class=\"select-label\">Motivo:</label>\n }\n <select class=\"form-select\" [(ngModel)]=\"selectedOption\">\n @for(opt of opcionesFormateadas(); track $index){\n <option [value]=\"opt.codigo\">{{ opt.descri }}</option>\n }\n </select>\n </div>\n }\n\n @if(showTextarea() && mostrarTextareaComputed()){\n <div class=\"textarea-wrapper\">\n <textarea class=\"form-control\" placeholder=\"Ingresar motivo...\" [(ngModel)]=\"textareaValueModel\"\n (ngModelChange)=\"onTextareaChange($event)\" [maxlength]=\"maxLength()\">\n </textarea>\n <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\n Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\n </div>\n </div>\n }\n </div>\n\n\n <div class=\"actions\">\n @if(mostrarConfirmar()){\n <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"focus()\" [minWidth]=\"100\" />\n }\n @if(mostrarExtra()){\n <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\n }\n @if(mostrarCancelar()){\n <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" [autoFocus]=\"!focus()\" [minWidth]=\"100\" />\n }\n </div>\n\n <div class=\"fw-bold fs-6 mt-4 d-inline-flex px-3 py-1 rounded d-flex align-items-center gap-2\"\n style=\"background: rgba(128, 128, 128, 0.185);\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n Por favor, selecciona cuidadosamente. Esta acci\u00F3n es irreversible.\n </div>\n\n</div>", styles: [".alert-confirm-container{border-radius:16px;display:flex;flex-direction:column;max-height:85vh;overflow:hidden;padding-bottom:32px}.alert-confirm-container>div:last-child{align-self:center;padding:0 30px}.alert-confirm-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:40px 30px 24px;text-align:center}.alert-confirm-content::-webkit-scrollbar{width:5px}.alert-confirm-content::-webkit-scrollbar-track{background:transparent}.alert-confirm-content::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:3px}@keyframes confirmEntrance{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}80%{transform:scale(.95)}to{transform:scale(1)}}@keyframes confirmPulse{0%,to{box-shadow:0 8px 24px #b4780059}50%{box-shadow:0 8px 32px #b47800a6,0 0 0 10px #b4780012}}@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,#fbbf24,#d97706);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #b4780059;animation:confirmEntrance .5s cubic-bezier(.36,.07,.19,.97) both,confirmPulse 2.4s ease-in-out .5s infinite}.icon-circle i{color:#fff;font-size:34px;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{font-size:11px;font-weight:900}.confirm-message{font-size:.95rem;color:#6b7280;line-height:1.6;margin-bottom:24px}.select-wrapper{display:flex;align-items:center;gap:8px;margin-bottom:16px;text-align:left}.select-wrapper .select-label{font-size:.875rem;font-weight:600;color:#374151;white-space:nowrap;margin-bottom:0}.textarea-wrapper{margin-bottom:16px;text-align:left}.textarea-wrapper .form-control{min-height:100px;resize:vertical}.character-counter{font-size:.75rem;color:#9ca3af;text-align:right;margin-top:4px}.color-caracter{color:#d97706!important}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 30px}.actions app-button{min-width:110px}\n"] }]
|
|
452
454
|
}], ctorParameters: () => [] });
|
|
@@ -469,10 +471,10 @@ class AlertaComponent {
|
|
|
469
471
|
}
|
|
470
472
|
return this.mensaje().replace(/\n/g, '<br>');
|
|
471
473
|
});
|
|
472
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
473
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
474
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
475
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AlertaComponent, isStandalone: true, selector: "app-alerta", inputs: { titulo: { classPropertyName: "titulo", publicName: "titulo", isSignal: true, isRequired: false, transformFunction: null }, mensaje: { classPropertyName: "mensaje", publicName: "mensaje", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, classContainer: { classPropertyName: "classContainer", publicName: "classContainer", isSignal: true, isRequired: false, transformFunction: null }, paddingClass: { classPropertyName: "paddingClass", publicName: "paddingClass", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex bg-title align-items-center flex-md-row {{classContainer()}}\"\r\n [ngClass]=\"{'flex-column': (titulo()?.length || 0) + (mensajeFormateado()?.length || 0) > 100}\">\r\n <i class=\"fas fa-exclamation-circle color-icon me-sm-1 mb-1 mb-sm-0\" [style.fontSize.px]=\"iconSize()\"></i>\r\n <div class=\"text-alerta text-center text-sm-start ms-1\" [class.text-hanging]=\"validateSalto()\"\r\n [style.paddingLeft.px]=\"validateSalto() ? paddingClass() : null\" >\r\n @if (titulo()) {\r\n <strong class=\"alert-title\">{{ titulo() }}</strong>\r\n }\r\n @if (!validateSalto()) {\r\n {{ mensaje() }}\r\n }\r\n\r\n @if (validateSalto()) {\r\n <span class=\"alert-message\" [innerHTML]=\"mensajeFormateado()\"></span>\r\n }\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".bg-title{position:relative;background:#fff0d5;display:inline-flex;padding:5px;color:#000;font-weight:400;border-radius:8px;overflow:hidden}.bg-title:after{content:\"\";position:absolute;background:#f0ad86;top:0;left:0;animation:moveAround 4s linear infinite}@keyframes moveAround{0%{top:0;left:0;width:200px;height:2px}25%{top:0;left:calc(100% + -0px);width:2px;height:2px}50%{top:calc(100% - 2px);left:calc(100% - 2px);width:200px;height:50px}75%{top:calc(100% - 2px);left:0;width:2px;height:50px}to{top:0;left:0;width:2px;height:2px}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;color:#855d16}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}.text-alerta{font-size:14px}.text-hanging{position:relative;padding-left:73px}.text-hanging .alert-title{position:absolute;left:0;top:50%;transform:translateY(-50%)}.text-hanging .alert-message{display:block;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
474
476
|
}
|
|
475
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
477
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertaComponent, decorators: [{
|
|
476
478
|
type: Component,
|
|
477
479
|
args: [{ selector: 'app-alerta', imports: [NgClass], template: "<div class=\"d-flex bg-title align-items-center flex-md-row {{classContainer()}}\"\r\n [ngClass]=\"{'flex-column': (titulo()?.length || 0) + (mensajeFormateado()?.length || 0) > 100}\">\r\n <i class=\"fas fa-exclamation-circle color-icon me-sm-1 mb-1 mb-sm-0\" [style.fontSize.px]=\"iconSize()\"></i>\r\n <div class=\"text-alerta text-center text-sm-start ms-1\" [class.text-hanging]=\"validateSalto()\"\r\n [style.paddingLeft.px]=\"validateSalto() ? paddingClass() : null\" >\r\n @if (titulo()) {\r\n <strong class=\"alert-title\">{{ titulo() }}</strong>\r\n }\r\n @if (!validateSalto()) {\r\n {{ mensaje() }}\r\n }\r\n\r\n @if (validateSalto()) {\r\n <span class=\"alert-message\" [innerHTML]=\"mensajeFormateado()\"></span>\r\n }\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".bg-title{position:relative;background:#fff0d5;display:inline-flex;padding:5px;color:#000;font-weight:400;border-radius:8px;overflow:hidden}.bg-title:after{content:\"\";position:absolute;background:#f0ad86;top:0;left:0;animation:moveAround 4s linear infinite}@keyframes moveAround{0%{top:0;left:0;width:200px;height:2px}25%{top:0;left:calc(100% + -0px);width:2px;height:2px}50%{top:calc(100% - 2px);left:calc(100% - 2px);width:200px;height:50px}75%{top:calc(100% - 2px);left:0;width:2px;height:50px}to{top:0;left:0;width:2px;height:2px}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;color:#855d16}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}.text-alerta{font-size:14px}.text-hanging{position:relative;padding-left:73px}.text-hanging .alert-title{position:absolute;left:0;top:50%;transform:translateY(-50%)}.text-hanging .alert-message{display:block;white-space:pre-line}\n"] }]
|
|
478
480
|
}] });
|
|
@@ -488,10 +490,10 @@ class AlertErrorComponent {
|
|
|
488
490
|
onAceptar() {
|
|
489
491
|
this.activeModal.close(true);
|
|
490
492
|
}
|
|
491
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
492
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
493
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
494
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], outputs: ["accion", "fileSelected"] }] });
|
|
493
495
|
}
|
|
494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
496
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertErrorComponent, decorators: [{
|
|
495
497
|
type: Component,
|
|
496
498
|
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"] }]
|
|
497
499
|
}] });
|
|
@@ -500,12 +502,12 @@ class BadgeComponent {
|
|
|
500
502
|
label = input('Exp');
|
|
501
503
|
color = input('bg-warning');
|
|
502
504
|
size = input(10.5);
|
|
503
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
504
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
505
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
506
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: BadgeComponent, isStandalone: true, selector: "app-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
505
507
|
<span class="badge text-dark font-weight-bold me-2" [ngClass]="color()" [style.fontSize.px]="size()"> {{ label() }} </span>
|
|
506
508
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
507
509
|
}
|
|
508
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
510
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
509
511
|
type: Component,
|
|
510
512
|
args: [{
|
|
511
513
|
selector: 'app-badge',
|
|
@@ -538,8 +540,8 @@ class ToasterComponent {
|
|
|
538
540
|
removeToast(id) {
|
|
539
541
|
this.toastService.remove(id);
|
|
540
542
|
}
|
|
541
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
542
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToasterComponent, isStandalone: true, selector: "app-toaster", ngImport: i0, template: "<div class=\"toastr-container\">\n @for (toast of toastNormal; track toast.id) {\n\n <div class=\"toast {{toast.type}}\" [class.loading-done]=\"(toast.progress ?? 0) >= 100\" [@toastAnimation]>\n\n @if (toast.type == 'loading') {\n\n @if ((toast.progress ?? 0) < 100) {\n <div class=\"toast-icon\">\n <div class=\"loading-orbit\">\n <div class=\"file-core\">\n <i class=\"fas fa-file-alt\"></i>\n </div>\n </div>\n </div>\n <div class=\"toast-content loading-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n <div class=\"loading-bar-wrap\">\n <div class=\"loading-bar-fill\"></div>\n </div>\n </div>\n } @else {\n <div class=\"toast-icon\">\n <div class=\"complete-circle\">\n <i class=\"fas fa-check\"></i>\n </div>\n </div>\n <div class=\"toast-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n </div>\n }\n\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n\n } @else {\n\n <div class=\"toast-icon\">\n <i class=\"{{iconType[toast.type]}}\"></i>\n </div>\n <div class=\"toast-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n </div>\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n <div class=\"toast-loader\"></div>\n\n }\n\n </div>\n }\n</div>\n\n<div class=\"toastr-webpush\">\n @for (toast of toastWebPush; track toast.id) {\n <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\n\n <div class=\"toast-icon\">\n <div class=\"webpush-icon-wrap\">\n <i class=\"{{ toast.icon ?? 'fas fa-bell' }}\"></i>\n <span class=\"live-dot\"></span>\n </div>\n </div>\n\n <div class=\"toast-content-webpush\">\n <div class=\"webpush-header\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <span class=\"webpush-badge\">\n <span class=\"badge-dot\"></span>EN VIVO\n </span>\n </div>\n <p class=\"toast-message-webpush\">{{ toast.message }}</p>\n @if (toast.subtitle) {\n <p class=\"toast-subtitle\">\n <i class=\"fas fa-bolt\"></i>\n {{ toast.subtitle }}\n </p>\n }\n </div>\n\n <button class=\"toast-close-webpush\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n <div class=\"toast-loader-webpush\"></div>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.toastr-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast{pointer-events:all;display:flex;align-items:center;width:368px;min-height:68px;border-radius:16px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.toast.success{background:#10b981;border-color:#0d9367;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #10b98180,0 12px 24px -4px #10b98159}.toast.success:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #10b98199,0 20px 40px -8px #10b98173}.toast.error{background:#ef4444;border-color:#ec1e1e;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #ef444480,0 12px 24px -4px #ef444459}.toast.error:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #ef444499,0 20px 40px -8px #ef444473}.toast.info{background:#3b82f6;border-color:#1469f4;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #3b82f680,0 12px 24px -4px #3b82f659}.toast.info:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #3b82f699,0 20px 40px -8px #3b82f673}.toast.warning{background:#f59e0b;border-color:#cf8508;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #f59e0b80,0 12px 24px -4px #f59e0b59}.toast.warning:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #f59e0b99,0 20px 40px -8px #f59e0b73}.toast.loading{background:#fff;border-color:#00000014;box-shadow:0 4px 8px -2px #0000001f,0 12px 24px -4px #00000014}.toast.loading .toast-title{color:#000000d9}.toast.loading .toast-message{color:#00000080}.toast.loading .toast-close{background:#0000000f;border-color:#0000001a;color:#0006}.toast.loading .toast-close:hover{background:#0000001f;color:#000000bf}.toast.loading:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 8px 16px -4px #00000026,0 20px 40px -8px #0000001a}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:16px 0 0 16px;z-index:1}.success:before{background:#096546;box-shadow:0 0 10px #0c8a6099}.error:before{background:#c61111;box-shadow:0 0 10px #eb151599}.info:before{background:#0953cc;box-shadow:0 0 10px #0b63f399}.warning:before{background:#9e6506;box-shadow:0 0 10px #c57f0899}.toast-icon{padding:0 14px 0 22px;flex-shrink:0}.toast-icon i{display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;font-size:14px!important;padding:0!important;margin:0!important;border-radius:10px;animation:iconPulse 2.5s ease-in-out infinite;transition:transform .2s ease}.bg-success,.bg-danger,.bg-info,.bg-warning{background:#ffffff38!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important}.toast-content{flex-grow:1;padding:14px 44px 14px 4px}.toast-title{font-weight:600;font-size:13px;margin-bottom:3px;color:#fff;letter-spacing:-.01em;line-height:1.3}.toast-message{font-size:11.5px;color:#fffc;padding:0;margin:0;line-height:1.55}.toast-close{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#ffffff2e;border:1px solid rgba(255,255,255,.3);border-radius:7px;font-size:15px;font-weight:400;line-height:1;cursor:pointer;color:#fffc;padding:0;transition:background .15s ease,color .15s ease,border-color .15s ease}.toast-close:hover{background:#ffffff4d;color:#fff;border-color:#ffffff73}.toast-loader{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 3s linear forwards}.success .toast-loader{background:linear-gradient(90deg,#10b981,#29ecac)}.error .toast-loader{background:linear-gradient(90deg,#ef4444,#f58a8a)}.info .toast-loader{background:linear-gradient(90deg,#3b82f6,#84b1f9)}.warning .toast-loader{background:linear-gradient(90deg,#f59e0b,#f8bb54)}.loading{min-height:82px}.loading:before{display:none}.loading:after{content:\"\";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.06),transparent);animation:shimmerScan 2.4s ease-in-out infinite;pointer-events:none;border-radius:16px}.loading-done:before{display:block!important;background:#10b981!important;box-shadow:0 0 14px #10b981bf!important}.loading-done:after{display:none}.loading-orbit{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.loading-orbit:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1s linear infinite}.loading-orbit:after{content:\"\";position:absolute;inset:7px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.6s linear infinite reverse}.file-core{width:24px;height:24px;background:#3b82f61f;border:1px solid rgba(59,130,246,.28);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#3b82f6;font-size:10px;z-index:1;animation:filePulse 2s ease-in-out infinite}.complete-circle{width:36px;height:36px;background:#10b98126;border:1px solid rgba(16,185,129,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#10b981;font-size:13px;box-shadow:0 0 18px #10b98159;animation:completePop .45s cubic-bezier(.34,1.56,.64,1) forwards;flex-shrink:0}.loading-content{padding-bottom:18px}.loading-bar-wrap{margin-top:9px;width:100%;height:3px;background:#ffffff12;border-radius:100px;overflow:hidden;position:relative}.loading-bar-fill{position:absolute;top:0;left:-40%;height:100%;width:40%;border-radius:100px;background:linear-gradient(90deg,transparent,#3b82f6 35%,#8b5cf6 65%,transparent);animation:indeterminateSlide 1.6s ease-in-out infinite}@property --border-angle{syntax: \"<angle>\"; initial-value: 0deg; inherits: false;}.toastr-webpush{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast-webpush{--border-angle: 0deg;pointer-events:all;display:flex;align-items:center;width:380px;min-height:100px;border-radius:20px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--border-angle),rgba(59,130,246,.85),rgba(139,92,246,.75),rgba(6,182,212,.7),rgba(16,185,129,.65),rgba(59,130,246,.85)) border-box;border:1.5px solid transparent;box-shadow:0 8px 20px -4px #0000001f,0 24px 48px -8px #00000014,0 0 50px -12px #3b82f626;cursor:pointer;animation:webpushBorderSpin 5s linear infinite;transition:transform .2s ease,box-shadow .2s ease}.toast-webpush:hover{transform:translateY(-3px) scale(1.006);box-shadow:0 12px 28px -4px #00000026,0 32px 60px -8px #0000001a,0 0 60px -10px #3b82f640}.webpush-icon-wrap{position:relative;flex-shrink:0;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}.webpush-icon-wrap:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1.2s linear infinite}.webpush-icon-wrap:after{content:\"\";position:absolute;inset:8px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.8s linear infinite reverse}.webpush-icon-wrap i{font-size:18px;color:#3b82f6;position:relative;z-index:1}.live-dot{position:absolute;bottom:2px;right:2px;width:11px;height:11px;background:#10b981;border-radius:50%;border:2px solid #ffffff;z-index:2}.live-dot:before{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(16,185,129,.5);animation:livePing 2s ease-out infinite}.live-dot:after{content:\"\";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(16,185,129,.2);animation:livePing 2s ease-out infinite .5s}.toast-content-webpush{flex-grow:1;padding:14px 44px 14px 14px}.webpush-header{display:flex;align-items:center;gap:7px;margin-bottom:5px}.toast-webpush .toast-title{font-weight:600;font-size:13px;color:#000000d9;letter-spacing:-.01em;line-height:1.3;margin:0}.webpush-badge{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;letter-spacing:.08em;color:#10b981;background:#10b9811a;border:1px solid rgba(16,185,129,.22);border-radius:5px;padding:2px 6px 2px 5px;flex-shrink:0;animation:badgePulse 2.5s ease-in-out infinite}.webpush-badge .badge-dot{width:5px;height:5px;background:#10b981;border-radius:50%;flex-shrink:0;animation:badgeDotBlink 1s ease-in-out infinite}.toast-message-webpush{font-size:11px;color:#00000080;margin:0 0 5px;padding:0;line-height:1.5}.toast-subtitle{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#3b82f6a6;margin:0;padding:0;letter-spacing:.01em}.toast-subtitle i{font-size:8px;color:#3b82f68c}.toast-close-webpush{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#0000000f;border:1px solid rgba(0,0,0,.1);border-radius:7px;cursor:pointer;color:#0006;padding:0;transition:background .15s ease,color .15s ease}.toast-close-webpush:hover{background:#0000001f;color:#000000bf}.toast-loader-webpush{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 10s linear forwards;background:linear-gradient(90deg,#3b82f6b3,#8b5cf699,#06b6d480)}@keyframes loader{0%{width:100%}to{width:0%}}@keyframes iconPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes filePulse{0%,to{box-shadow:0 0 #3b82f600}50%{box-shadow:0 0 0 5px #3b82f61f}}@keyframes completePop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes indeterminateSlide{0%{left:-40%}to{left:110%}}@keyframes shimmerScan{0%{left:-60%}to{left:140%}}@keyframes webpushBorderSpin{to{--border-angle: 360deg}}@keyframes livePing{0%{transform:scale(1);opacity:.7}to{transform:scale(2.4);opacity:0}}@keyframes badgePulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes badgeDotBlink{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}@media (max-width: 420px){.toast,.toast-webpush{width:calc(100vw - 24px)}.toastr-container,.toastr-webpush{left:12px;right:12px}}\n"], animations: [
|
|
543
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
544
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ToasterComponent, isStandalone: true, selector: "app-toaster", ngImport: i0, template: "<div class=\"toastr-container\">\n @for (toast of toastNormal; track toast.id) {\n\n <div class=\"toast {{toast.type}}\" [class.loading-done]=\"(toast.progress ?? 0) >= 100\" [@toastAnimation]>\n\n @if (toast.type == 'loading') {\n\n @if ((toast.progress ?? 0) < 100) {\n <div class=\"toast-icon\">\n <div class=\"loading-orbit\">\n <div class=\"file-core\">\n <i class=\"fas fa-file-alt\"></i>\n </div>\n </div>\n </div>\n <div class=\"toast-content loading-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n <div class=\"loading-bar-wrap\">\n <div class=\"loading-bar-fill\"></div>\n </div>\n </div>\n } @else {\n <div class=\"toast-icon\">\n <div class=\"complete-circle\">\n <i class=\"fas fa-check\"></i>\n </div>\n </div>\n <div class=\"toast-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n </div>\n }\n\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n\n } @else {\n\n <div class=\"toast-icon\">\n <i class=\"{{iconType[toast.type]}}\"></i>\n </div>\n <div class=\"toast-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n </div>\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n <div class=\"toast-loader\"></div>\n\n }\n\n </div>\n }\n</div>\n\n<div class=\"toastr-webpush\">\n @for (toast of toastWebPush; track toast.id) {\n <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\n\n <div class=\"toast-icon\">\n <div class=\"webpush-icon-wrap\">\n <i class=\"{{ toast.icon ?? 'fas fa-bell' }}\"></i>\n <span class=\"live-dot\"></span>\n </div>\n </div>\n\n <div class=\"toast-content-webpush\">\n <div class=\"webpush-header\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <span class=\"webpush-badge\">\n <span class=\"badge-dot\"></span>EN VIVO\n </span>\n </div>\n <p class=\"toast-message-webpush\">{{ toast.message }}</p>\n @if (toast.subtitle) {\n <p class=\"toast-subtitle\">\n <i class=\"fas fa-bolt\"></i>\n {{ toast.subtitle }}\n </p>\n }\n </div>\n\n <button class=\"toast-close-webpush\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n <div class=\"toast-loader-webpush\"></div>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.toastr-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast{pointer-events:all;display:flex;align-items:center;width:368px;min-height:68px;border-radius:16px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.toast.success{background:#10b981;border-color:#0d9367;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #10b98180,0 12px 24px -4px #10b98159}.toast.success:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #10b98199,0 20px 40px -8px #10b98173}.toast.error{background:#ef4444;border-color:#ec1e1e;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #ef444480,0 12px 24px -4px #ef444459}.toast.error:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #ef444499,0 20px 40px -8px #ef444473}.toast.info{background:#3b82f6;border-color:#1469f4;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #3b82f680,0 12px 24px -4px #3b82f659}.toast.info:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #3b82f699,0 20px 40px -8px #3b82f673}.toast.warning{background:#f59e0b;border-color:#cf8508;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #f59e0b80,0 12px 24px -4px #f59e0b59}.toast.warning:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #f59e0b99,0 20px 40px -8px #f59e0b73}.toast.loading{background:#fff;border-color:#00000014;box-shadow:0 4px 8px -2px #0000001f,0 12px 24px -4px #00000014}.toast.loading .toast-title{color:#000000d9}.toast.loading .toast-message{color:#00000080}.toast.loading .toast-close{background:#0000000f;border-color:#0000001a;color:#0006}.toast.loading .toast-close:hover{background:#0000001f;color:#000000bf}.toast.loading:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 8px 16px -4px #00000026,0 20px 40px -8px #0000001a}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:16px 0 0 16px;z-index:1}.success:before{background:#096546;box-shadow:0 0 10px #0c8a6099}.error:before{background:#c61111;box-shadow:0 0 10px #eb151599}.info:before{background:#0953cc;box-shadow:0 0 10px #0b63f399}.warning:before{background:#9e6506;box-shadow:0 0 10px #c57f0899}.toast-icon{padding:0 14px 0 22px;flex-shrink:0}.toast-icon i{display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;font-size:14px!important;padding:0!important;margin:0!important;border-radius:10px;animation:iconPulse 2.5s ease-in-out infinite;transition:transform .2s ease}.bg-success,.bg-danger,.bg-info,.bg-warning{background:#ffffff38!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important}.toast-content{flex-grow:1;padding:14px 44px 14px 4px}.toast-title{font-weight:600;font-size:13px;margin-bottom:3px;color:#fff;letter-spacing:-.01em;line-height:1.3}.toast-message{font-size:11.5px;color:#fffc;padding:0;margin:0;line-height:1.55}.toast-close{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#ffffff2e;border:1px solid rgba(255,255,255,.3);border-radius:7px;font-size:15px;font-weight:400;line-height:1;cursor:pointer;color:#fffc;padding:0;transition:background .15s ease,color .15s ease,border-color .15s ease}.toast-close:hover{background:#ffffff4d;color:#fff;border-color:#ffffff73}.toast-loader{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 3s linear forwards}.success .toast-loader{background:linear-gradient(90deg,#10b981,#29ecac)}.error .toast-loader{background:linear-gradient(90deg,#ef4444,#f58a8a)}.info .toast-loader{background:linear-gradient(90deg,#3b82f6,#84b1f9)}.warning .toast-loader{background:linear-gradient(90deg,#f59e0b,#f8bb54)}.loading{min-height:82px}.loading:before{display:none}.loading:after{content:\"\";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.06),transparent);animation:shimmerScan 2.4s ease-in-out infinite;pointer-events:none;border-radius:16px}.loading-done:before{display:block!important;background:#10b981!important;box-shadow:0 0 14px #10b981bf!important}.loading-done:after{display:none}.loading-orbit{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.loading-orbit:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1s linear infinite}.loading-orbit:after{content:\"\";position:absolute;inset:7px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.6s linear infinite reverse}.file-core{width:24px;height:24px;background:#3b82f61f;border:1px solid rgba(59,130,246,.28);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#3b82f6;font-size:10px;z-index:1;animation:filePulse 2s ease-in-out infinite}.complete-circle{width:36px;height:36px;background:#10b98126;border:1px solid rgba(16,185,129,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#10b981;font-size:13px;box-shadow:0 0 18px #10b98159;animation:completePop .45s cubic-bezier(.34,1.56,.64,1) forwards;flex-shrink:0}.loading-content{padding-bottom:18px}.loading-bar-wrap{margin-top:9px;width:100%;height:3px;background:#ffffff12;border-radius:100px;overflow:hidden;position:relative}.loading-bar-fill{position:absolute;top:0;left:-40%;height:100%;width:40%;border-radius:100px;background:linear-gradient(90deg,transparent,#3b82f6 35%,#8b5cf6 65%,transparent);animation:indeterminateSlide 1.6s ease-in-out infinite}@property --border-angle{syntax: \"<angle>\"; initial-value: 0deg; inherits: false;}.toastr-webpush{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast-webpush{--border-angle: 0deg;pointer-events:all;display:flex;align-items:center;width:380px;min-height:100px;border-radius:20px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--border-angle),rgba(59,130,246,.85),rgba(139,92,246,.75),rgba(6,182,212,.7),rgba(16,185,129,.65),rgba(59,130,246,.85)) border-box;border:1.5px solid transparent;box-shadow:0 8px 20px -4px #0000001f,0 24px 48px -8px #00000014,0 0 50px -12px #3b82f626;cursor:pointer;animation:webpushBorderSpin 5s linear infinite;transition:transform .2s ease,box-shadow .2s ease}.toast-webpush:hover{transform:translateY(-3px) scale(1.006);box-shadow:0 12px 28px -4px #00000026,0 32px 60px -8px #0000001a,0 0 60px -10px #3b82f640}.webpush-icon-wrap{position:relative;flex-shrink:0;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}.webpush-icon-wrap:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1.2s linear infinite}.webpush-icon-wrap:after{content:\"\";position:absolute;inset:8px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.8s linear infinite reverse}.webpush-icon-wrap i{font-size:18px;color:#3b82f6;position:relative;z-index:1}.live-dot{position:absolute;bottom:2px;right:2px;width:11px;height:11px;background:#10b981;border-radius:50%;border:2px solid #ffffff;z-index:2}.live-dot:before{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(16,185,129,.5);animation:livePing 2s ease-out infinite}.live-dot:after{content:\"\";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(16,185,129,.2);animation:livePing 2s ease-out infinite .5s}.toast-content-webpush{flex-grow:1;padding:14px 44px 14px 14px}.webpush-header{display:flex;align-items:center;gap:7px;margin-bottom:5px}.toast-webpush .toast-title{font-weight:600;font-size:13px;color:#000000d9;letter-spacing:-.01em;line-height:1.3;margin:0}.webpush-badge{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;letter-spacing:.08em;color:#10b981;background:#10b9811a;border:1px solid rgba(16,185,129,.22);border-radius:5px;padding:2px 6px 2px 5px;flex-shrink:0;animation:badgePulse 2.5s ease-in-out infinite}.webpush-badge .badge-dot{width:5px;height:5px;background:#10b981;border-radius:50%;flex-shrink:0;animation:badgeDotBlink 1s ease-in-out infinite}.toast-message-webpush{font-size:11px;color:#00000080;margin:0 0 5px;padding:0;line-height:1.5}.toast-subtitle{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#3b82f6a6;margin:0;padding:0;letter-spacing:.01em}.toast-subtitle i{font-size:8px;color:#3b82f68c}.toast-close-webpush{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#0000000f;border:1px solid rgba(0,0,0,.1);border-radius:7px;cursor:pointer;color:#0006;padding:0;transition:background .15s ease,color .15s ease}.toast-close-webpush:hover{background:#0000001f;color:#000000bf}.toast-loader-webpush{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 10s linear forwards;background:linear-gradient(90deg,#3b82f6b3,#8b5cf699,#06b6d480)}@keyframes loader{0%{width:100%}to{width:0%}}@keyframes iconPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes filePulse{0%,to{box-shadow:0 0 #3b82f600}50%{box-shadow:0 0 0 5px #3b82f61f}}@keyframes completePop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes indeterminateSlide{0%{left:-40%}to{left:110%}}@keyframes shimmerScan{0%{left:-60%}to{left:140%}}@keyframes webpushBorderSpin{to{--border-angle: 360deg}}@keyframes livePing{0%{transform:scale(1);opacity:.7}to{transform:scale(2.4);opacity:0}}@keyframes badgePulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes badgeDotBlink{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}@media(max-width:420px){.toast,.toast-webpush{width:calc(100vw - 24px)}.toastr-container,.toastr-webpush{left:12px;right:12px}}\n"], animations: [
|
|
543
545
|
trigger('toastAnimation', [
|
|
544
546
|
transition(':enter', [
|
|
545
547
|
style({ transform: 'translateX(110%)', opacity: 0, scale: 0.95 }),
|
|
@@ -551,7 +553,7 @@ class ToasterComponent {
|
|
|
551
553
|
])
|
|
552
554
|
] });
|
|
553
555
|
}
|
|
554
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
556
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ToasterComponent, decorators: [{
|
|
555
557
|
type: Component,
|
|
556
558
|
args: [{ selector: 'app-toaster', imports: [], animations: [
|
|
557
559
|
trigger('toastAnimation', [
|
|
@@ -563,7 +565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
563
565
|
animate('250ms cubic-bezier(0.4, 0, 1, 1)', style({ transform: 'translateX(110%)', opacity: 0, scale: 0.95 }))
|
|
564
566
|
])
|
|
565
567
|
])
|
|
566
|
-
], template: "<div class=\"toastr-container\">\n @for (toast of toastNormal; track toast.id) {\n\n <div class=\"toast {{toast.type}}\" [class.loading-done]=\"(toast.progress ?? 0) >= 100\" [@toastAnimation]>\n\n @if (toast.type == 'loading') {\n\n @if ((toast.progress ?? 0) < 100) {\n <div class=\"toast-icon\">\n <div class=\"loading-orbit\">\n <div class=\"file-core\">\n <i class=\"fas fa-file-alt\"></i>\n </div>\n </div>\n </div>\n <div class=\"toast-content loading-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n <div class=\"loading-bar-wrap\">\n <div class=\"loading-bar-fill\"></div>\n </div>\n </div>\n } @else {\n <div class=\"toast-icon\">\n <div class=\"complete-circle\">\n <i class=\"fas fa-check\"></i>\n </div>\n </div>\n <div class=\"toast-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n </div>\n }\n\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n\n } @else {\n\n <div class=\"toast-icon\">\n <i class=\"{{iconType[toast.type]}}\"></i>\n </div>\n <div class=\"toast-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n </div>\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n <div class=\"toast-loader\"></div>\n\n }\n\n </div>\n }\n</div>\n\n<div class=\"toastr-webpush\">\n @for (toast of toastWebPush; track toast.id) {\n <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\n\n <div class=\"toast-icon\">\n <div class=\"webpush-icon-wrap\">\n <i class=\"{{ toast.icon ?? 'fas fa-bell' }}\"></i>\n <span class=\"live-dot\"></span>\n </div>\n </div>\n\n <div class=\"toast-content-webpush\">\n <div class=\"webpush-header\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <span class=\"webpush-badge\">\n <span class=\"badge-dot\"></span>EN VIVO\n </span>\n </div>\n <p class=\"toast-message-webpush\">{{ toast.message }}</p>\n @if (toast.subtitle) {\n <p class=\"toast-subtitle\">\n <i class=\"fas fa-bolt\"></i>\n {{ toast.subtitle }}\n </p>\n }\n </div>\n\n <button class=\"toast-close-webpush\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n <div class=\"toast-loader-webpush\"></div>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.toastr-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast{pointer-events:all;display:flex;align-items:center;width:368px;min-height:68px;border-radius:16px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.toast.success{background:#10b981;border-color:#0d9367;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #10b98180,0 12px 24px -4px #10b98159}.toast.success:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #10b98199,0 20px 40px -8px #10b98173}.toast.error{background:#ef4444;border-color:#ec1e1e;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #ef444480,0 12px 24px -4px #ef444459}.toast.error:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #ef444499,0 20px 40px -8px #ef444473}.toast.info{background:#3b82f6;border-color:#1469f4;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #3b82f680,0 12px 24px -4px #3b82f659}.toast.info:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #3b82f699,0 20px 40px -8px #3b82f673}.toast.warning{background:#f59e0b;border-color:#cf8508;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #f59e0b80,0 12px 24px -4px #f59e0b59}.toast.warning:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #f59e0b99,0 20px 40px -8px #f59e0b73}.toast.loading{background:#fff;border-color:#00000014;box-shadow:0 4px 8px -2px #0000001f,0 12px 24px -4px #00000014}.toast.loading .toast-title{color:#000000d9}.toast.loading .toast-message{color:#00000080}.toast.loading .toast-close{background:#0000000f;border-color:#0000001a;color:#0006}.toast.loading .toast-close:hover{background:#0000001f;color:#000000bf}.toast.loading:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 8px 16px -4px #00000026,0 20px 40px -8px #0000001a}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:16px 0 0 16px;z-index:1}.success:before{background:#096546;box-shadow:0 0 10px #0c8a6099}.error:before{background:#c61111;box-shadow:0 0 10px #eb151599}.info:before{background:#0953cc;box-shadow:0 0 10px #0b63f399}.warning:before{background:#9e6506;box-shadow:0 0 10px #c57f0899}.toast-icon{padding:0 14px 0 22px;flex-shrink:0}.toast-icon i{display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;font-size:14px!important;padding:0!important;margin:0!important;border-radius:10px;animation:iconPulse 2.5s ease-in-out infinite;transition:transform .2s ease}.bg-success,.bg-danger,.bg-info,.bg-warning{background:#ffffff38!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important}.toast-content{flex-grow:1;padding:14px 44px 14px 4px}.toast-title{font-weight:600;font-size:13px;margin-bottom:3px;color:#fff;letter-spacing:-.01em;line-height:1.3}.toast-message{font-size:11.5px;color:#fffc;padding:0;margin:0;line-height:1.55}.toast-close{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#ffffff2e;border:1px solid rgba(255,255,255,.3);border-radius:7px;font-size:15px;font-weight:400;line-height:1;cursor:pointer;color:#fffc;padding:0;transition:background .15s ease,color .15s ease,border-color .15s ease}.toast-close:hover{background:#ffffff4d;color:#fff;border-color:#ffffff73}.toast-loader{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 3s linear forwards}.success .toast-loader{background:linear-gradient(90deg,#10b981,#29ecac)}.error .toast-loader{background:linear-gradient(90deg,#ef4444,#f58a8a)}.info .toast-loader{background:linear-gradient(90deg,#3b82f6,#84b1f9)}.warning .toast-loader{background:linear-gradient(90deg,#f59e0b,#f8bb54)}.loading{min-height:82px}.loading:before{display:none}.loading:after{content:\"\";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.06),transparent);animation:shimmerScan 2.4s ease-in-out infinite;pointer-events:none;border-radius:16px}.loading-done:before{display:block!important;background:#10b981!important;box-shadow:0 0 14px #10b981bf!important}.loading-done:after{display:none}.loading-orbit{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.loading-orbit:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1s linear infinite}.loading-orbit:after{content:\"\";position:absolute;inset:7px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.6s linear infinite reverse}.file-core{width:24px;height:24px;background:#3b82f61f;border:1px solid rgba(59,130,246,.28);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#3b82f6;font-size:10px;z-index:1;animation:filePulse 2s ease-in-out infinite}.complete-circle{width:36px;height:36px;background:#10b98126;border:1px solid rgba(16,185,129,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#10b981;font-size:13px;box-shadow:0 0 18px #10b98159;animation:completePop .45s cubic-bezier(.34,1.56,.64,1) forwards;flex-shrink:0}.loading-content{padding-bottom:18px}.loading-bar-wrap{margin-top:9px;width:100%;height:3px;background:#ffffff12;border-radius:100px;overflow:hidden;position:relative}.loading-bar-fill{position:absolute;top:0;left:-40%;height:100%;width:40%;border-radius:100px;background:linear-gradient(90deg,transparent,#3b82f6 35%,#8b5cf6 65%,transparent);animation:indeterminateSlide 1.6s ease-in-out infinite}@property --border-angle{syntax: \"<angle>\"; initial-value: 0deg; inherits: false;}.toastr-webpush{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast-webpush{--border-angle: 0deg;pointer-events:all;display:flex;align-items:center;width:380px;min-height:100px;border-radius:20px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--border-angle),rgba(59,130,246,.85),rgba(139,92,246,.75),rgba(6,182,212,.7),rgba(16,185,129,.65),rgba(59,130,246,.85)) border-box;border:1.5px solid transparent;box-shadow:0 8px 20px -4px #0000001f,0 24px 48px -8px #00000014,0 0 50px -12px #3b82f626;cursor:pointer;animation:webpushBorderSpin 5s linear infinite;transition:transform .2s ease,box-shadow .2s ease}.toast-webpush:hover{transform:translateY(-3px) scale(1.006);box-shadow:0 12px 28px -4px #00000026,0 32px 60px -8px #0000001a,0 0 60px -10px #3b82f640}.webpush-icon-wrap{position:relative;flex-shrink:0;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}.webpush-icon-wrap:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1.2s linear infinite}.webpush-icon-wrap:after{content:\"\";position:absolute;inset:8px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.8s linear infinite reverse}.webpush-icon-wrap i{font-size:18px;color:#3b82f6;position:relative;z-index:1}.live-dot{position:absolute;bottom:2px;right:2px;width:11px;height:11px;background:#10b981;border-radius:50%;border:2px solid #ffffff;z-index:2}.live-dot:before{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(16,185,129,.5);animation:livePing 2s ease-out infinite}.live-dot:after{content:\"\";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(16,185,129,.2);animation:livePing 2s ease-out infinite .5s}.toast-content-webpush{flex-grow:1;padding:14px 44px 14px 14px}.webpush-header{display:flex;align-items:center;gap:7px;margin-bottom:5px}.toast-webpush .toast-title{font-weight:600;font-size:13px;color:#000000d9;letter-spacing:-.01em;line-height:1.3;margin:0}.webpush-badge{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;letter-spacing:.08em;color:#10b981;background:#10b9811a;border:1px solid rgba(16,185,129,.22);border-radius:5px;padding:2px 6px 2px 5px;flex-shrink:0;animation:badgePulse 2.5s ease-in-out infinite}.webpush-badge .badge-dot{width:5px;height:5px;background:#10b981;border-radius:50%;flex-shrink:0;animation:badgeDotBlink 1s ease-in-out infinite}.toast-message-webpush{font-size:11px;color:#00000080;margin:0 0 5px;padding:0;line-height:1.5}.toast-subtitle{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#3b82f6a6;margin:0;padding:0;letter-spacing:.01em}.toast-subtitle i{font-size:8px;color:#3b82f68c}.toast-close-webpush{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#0000000f;border:1px solid rgba(0,0,0,.1);border-radius:7px;cursor:pointer;color:#0006;padding:0;transition:background .15s ease,color .15s ease}.toast-close-webpush:hover{background:#0000001f;color:#000000bf}.toast-loader-webpush{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 10s linear forwards;background:linear-gradient(90deg,#3b82f6b3,#8b5cf699,#06b6d480)}@keyframes loader{0%{width:100%}to{width:0%}}@keyframes iconPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes filePulse{0%,to{box-shadow:0 0 #3b82f600}50%{box-shadow:0 0 0 5px #3b82f61f}}@keyframes completePop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes indeterminateSlide{0%{left:-40%}to{left:110%}}@keyframes shimmerScan{0%{left:-60%}to{left:140%}}@keyframes webpushBorderSpin{to{--border-angle: 360deg}}@keyframes livePing{0%{transform:scale(1);opacity:.7}to{transform:scale(2.4);opacity:0}}@keyframes badgePulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes badgeDotBlink{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}@media (max-width: 420px){.toast,.toast-webpush{width:calc(100vw - 24px)}.toastr-container,.toastr-webpush{left:12px;right:12px}}\n"] }]
|
|
568
|
+
], template: "<div class=\"toastr-container\">\n @for (toast of toastNormal; track toast.id) {\n\n <div class=\"toast {{toast.type}}\" [class.loading-done]=\"(toast.progress ?? 0) >= 100\" [@toastAnimation]>\n\n @if (toast.type == 'loading') {\n\n @if ((toast.progress ?? 0) < 100) {\n <div class=\"toast-icon\">\n <div class=\"loading-orbit\">\n <div class=\"file-core\">\n <i class=\"fas fa-file-alt\"></i>\n </div>\n </div>\n </div>\n <div class=\"toast-content loading-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n <div class=\"loading-bar-wrap\">\n <div class=\"loading-bar-fill\"></div>\n </div>\n </div>\n } @else {\n <div class=\"toast-icon\">\n <div class=\"complete-circle\">\n <i class=\"fas fa-check\"></i>\n </div>\n </div>\n <div class=\"toast-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n </div>\n }\n\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n\n } @else {\n\n <div class=\"toast-icon\">\n <i class=\"{{iconType[toast.type]}}\"></i>\n </div>\n <div class=\"toast-content\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <p class=\"toast-message\">{{ toast.message }}</p>\n </div>\n <button class=\"toast-close\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n <div class=\"toast-loader\"></div>\n\n }\n\n </div>\n }\n</div>\n\n<div class=\"toastr-webpush\">\n @for (toast of toastWebPush; track toast.id) {\n <div class=\"toast-webpush {{toast.type}}\" [@toastAnimation]>\n\n <div class=\"toast-icon\">\n <div class=\"webpush-icon-wrap\">\n <i class=\"{{ toast.icon ?? 'fas fa-bell' }}\"></i>\n <span class=\"live-dot\"></span>\n </div>\n </div>\n\n <div class=\"toast-content-webpush\">\n <div class=\"webpush-header\">\n <h4 class=\"toast-title\">{{ toast.title }}</h4>\n <span class=\"webpush-badge\">\n <span class=\"badge-dot\"></span>EN VIVO\n </span>\n </div>\n <p class=\"toast-message-webpush\">{{ toast.message }}</p>\n @if (toast.subtitle) {\n <p class=\"toast-subtitle\">\n <i class=\"fas fa-bolt\"></i>\n {{ toast.subtitle }}\n </p>\n }\n </div>\n\n <button class=\"toast-close-webpush\" (click)=\"removeToast(toast.id)\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 1L9 9M9 1L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n <div class=\"toast-loader-webpush\"></div>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.toastr-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast{pointer-events:all;display:flex;align-items:center;width:368px;min-height:68px;border-radius:16px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.toast.success{background:#10b981;border-color:#0d9367;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #10b98180,0 12px 24px -4px #10b98159}.toast.success:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #10b98199,0 20px 40px -8px #10b98173}.toast.error{background:#ef4444;border-color:#ec1e1e;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #ef444480,0 12px 24px -4px #ef444459}.toast.error:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #ef444499,0 20px 40px -8px #ef444473}.toast.info{background:#3b82f6;border-color:#1469f4;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #3b82f680,0 12px 24px -4px #3b82f659}.toast.info:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #3b82f699,0 20px 40px -8px #3b82f673}.toast.warning{background:#f59e0b;border-color:#cf8508;box-shadow:0 0 0 1px #ffffff1f inset,0 4px 8px -2px #f59e0b80,0 12px 24px -4px #f59e0b59}.toast.warning:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 0 0 1px #ffffff26 inset,0 8px 16px -4px #f59e0b99,0 20px 40px -8px #f59e0b73}.toast.loading{background:#fff;border-color:#00000014;box-shadow:0 4px 8px -2px #0000001f,0 12px 24px -4px #00000014}.toast.loading .toast-title{color:#000000d9}.toast.loading .toast-message{color:#00000080}.toast.loading .toast-close{background:#0000000f;border-color:#0000001a;color:#0006}.toast.loading .toast-close:hover{background:#0000001f;color:#000000bf}.toast.loading:hover{transform:translateY(-2px) scale(1.005);box-shadow:0 8px 16px -4px #00000026,0 20px 40px -8px #0000001a}.toast:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:16px 0 0 16px;z-index:1}.success:before{background:#096546;box-shadow:0 0 10px #0c8a6099}.error:before{background:#c61111;box-shadow:0 0 10px #eb151599}.info:before{background:#0953cc;box-shadow:0 0 10px #0b63f399}.warning:before{background:#9e6506;box-shadow:0 0 10px #c57f0899}.toast-icon{padding:0 14px 0 22px;flex-shrink:0}.toast-icon i{display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;font-size:14px!important;padding:0!important;margin:0!important;border-radius:10px;animation:iconPulse 2.5s ease-in-out infinite;transition:transform .2s ease}.bg-success,.bg-danger,.bg-info,.bg-warning{background:#ffffff38!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important}.toast-content{flex-grow:1;padding:14px 44px 14px 4px}.toast-title{font-weight:600;font-size:13px;margin-bottom:3px;color:#fff;letter-spacing:-.01em;line-height:1.3}.toast-message{font-size:11.5px;color:#fffc;padding:0;margin:0;line-height:1.55}.toast-close{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#ffffff2e;border:1px solid rgba(255,255,255,.3);border-radius:7px;font-size:15px;font-weight:400;line-height:1;cursor:pointer;color:#fffc;padding:0;transition:background .15s ease,color .15s ease,border-color .15s ease}.toast-close:hover{background:#ffffff4d;color:#fff;border-color:#ffffff73}.toast-loader{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 3s linear forwards}.success .toast-loader{background:linear-gradient(90deg,#10b981,#29ecac)}.error .toast-loader{background:linear-gradient(90deg,#ef4444,#f58a8a)}.info .toast-loader{background:linear-gradient(90deg,#3b82f6,#84b1f9)}.warning .toast-loader{background:linear-gradient(90deg,#f59e0b,#f8bb54)}.loading{min-height:82px}.loading:before{display:none}.loading:after{content:\"\";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(59,130,246,.06),transparent);animation:shimmerScan 2.4s ease-in-out infinite;pointer-events:none;border-radius:16px}.loading-done:before{display:block!important;background:#10b981!important;box-shadow:0 0 14px #10b981bf!important}.loading-done:after{display:none}.loading-orbit{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.loading-orbit:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1s linear infinite}.loading-orbit:after{content:\"\";position:absolute;inset:7px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.6s linear infinite reverse}.file-core{width:24px;height:24px;background:#3b82f61f;border:1px solid rgba(59,130,246,.28);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#3b82f6;font-size:10px;z-index:1;animation:filePulse 2s ease-in-out infinite}.complete-circle{width:36px;height:36px;background:#10b98126;border:1px solid rgba(16,185,129,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#10b981;font-size:13px;box-shadow:0 0 18px #10b98159;animation:completePop .45s cubic-bezier(.34,1.56,.64,1) forwards;flex-shrink:0}.loading-content{padding-bottom:18px}.loading-bar-wrap{margin-top:9px;width:100%;height:3px;background:#ffffff12;border-radius:100px;overflow:hidden;position:relative}.loading-bar-fill{position:absolute;top:0;left:-40%;height:100%;width:40%;border-radius:100px;background:linear-gradient(90deg,transparent,#3b82f6 35%,#8b5cf6 65%,transparent);animation:indeterminateSlide 1.6s ease-in-out infinite}@property --border-angle{syntax: \"<angle>\"; initial-value: 0deg; inherits: false;}.toastr-webpush{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}.toast-webpush{--border-angle: 0deg;pointer-events:all;display:flex;align-items:center;width:380px;min-height:100px;border-radius:20px;overflow:hidden;position:relative;font-family:Poppins,sans-serif;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--border-angle),rgba(59,130,246,.85),rgba(139,92,246,.75),rgba(6,182,212,.7),rgba(16,185,129,.65),rgba(59,130,246,.85)) border-box;border:1.5px solid transparent;box-shadow:0 8px 20px -4px #0000001f,0 24px 48px -8px #00000014,0 0 50px -12px #3b82f626;cursor:pointer;animation:webpushBorderSpin 5s linear infinite;transition:transform .2s ease,box-shadow .2s ease}.toast-webpush:hover{transform:translateY(-3px) scale(1.006);box-shadow:0 12px 28px -4px #00000026,0 32px 60px -8px #0000001a,0 0 60px -10px #3b82f640}.webpush-icon-wrap{position:relative;flex-shrink:0;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center}.webpush-icon-wrap:before{content:\"\";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#3b82f6;border-right-color:#3b82f64d;animation:orbitSpin 1.2s linear infinite}.webpush-icon-wrap:after{content:\"\";position:absolute;inset:8px;border-radius:50%;border:1.5px solid transparent;border-top-color:#8b5cf6;border-left-color:#8b5cf659;animation:orbitSpin 1.8s linear infinite reverse}.webpush-icon-wrap i{font-size:18px;color:#3b82f6;position:relative;z-index:1}.live-dot{position:absolute;bottom:2px;right:2px;width:11px;height:11px;background:#10b981;border-radius:50%;border:2px solid #ffffff;z-index:2}.live-dot:before{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(16,185,129,.5);animation:livePing 2s ease-out infinite}.live-dot:after{content:\"\";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(16,185,129,.2);animation:livePing 2s ease-out infinite .5s}.toast-content-webpush{flex-grow:1;padding:14px 44px 14px 14px}.webpush-header{display:flex;align-items:center;gap:7px;margin-bottom:5px}.toast-webpush .toast-title{font-weight:600;font-size:13px;color:#000000d9;letter-spacing:-.01em;line-height:1.3;margin:0}.webpush-badge{display:inline-flex;align-items:center;gap:4px;font-size:8px;font-weight:700;letter-spacing:.08em;color:#10b981;background:#10b9811a;border:1px solid rgba(16,185,129,.22);border-radius:5px;padding:2px 6px 2px 5px;flex-shrink:0;animation:badgePulse 2.5s ease-in-out infinite}.webpush-badge .badge-dot{width:5px;height:5px;background:#10b981;border-radius:50%;flex-shrink:0;animation:badgeDotBlink 1s ease-in-out infinite}.toast-message-webpush{font-size:11px;color:#00000080;margin:0 0 5px;padding:0;line-height:1.5}.toast-subtitle{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#3b82f6a6;margin:0;padding:0;letter-spacing:.01em}.toast-subtitle i{font-size:8px;color:#3b82f68c}.toast-close-webpush{position:absolute;top:10px;right:12px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;background:#0000000f;border:1px solid rgba(0,0,0,.1);border-radius:7px;cursor:pointer;color:#0006;padding:0;transition:background .15s ease,color .15s ease}.toast-close-webpush:hover{background:#0000001f;color:#000000bf}.toast-loader-webpush{position:absolute;bottom:0;left:0;height:2px;border-radius:0 2px 0 0;animation:loader 10s linear forwards;background:linear-gradient(90deg,#3b82f6b3,#8b5cf699,#06b6d480)}@keyframes loader{0%{width:100%}to{width:0%}}@keyframes iconPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}@keyframes orbitSpin{to{transform:rotate(360deg)}}@keyframes filePulse{0%,to{box-shadow:0 0 #3b82f600}50%{box-shadow:0 0 0 5px #3b82f61f}}@keyframes completePop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes indeterminateSlide{0%{left:-40%}to{left:110%}}@keyframes shimmerScan{0%{left:-60%}to{left:140%}}@keyframes webpushBorderSpin{to{--border-angle: 360deg}}@keyframes livePing{0%{transform:scale(1);opacity:.7}to{transform:scale(2.4);opacity:0}}@keyframes badgePulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes badgeDotBlink{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}@media(max-width:420px){.toast,.toast-webpush{width:calc(100vw - 24px)}.toastr-container,.toastr-webpush{left:12px;right:12px}}\n"] }]
|
|
567
569
|
}] });
|
|
568
570
|
|
|
569
571
|
class DropdownCdkComponent {
|
|
@@ -572,12 +574,12 @@ class DropdownCdkComponent {
|
|
|
572
574
|
content = contentChild('content');
|
|
573
575
|
inline = input(false);
|
|
574
576
|
altoContainer = input(200);
|
|
575
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
576
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.
|
|
577
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DropdownCdkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
578
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", type: DropdownCdkComponent, isStandalone: true, selector: "app-dropdown-cdk", inputs: { inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-100\">\r\n\r\n <div \r\n cdkOverlayOrigin\r\n #dropdown=\"cdkOverlayOrigin\"\r\n (click)=\"show.set(true)\"\r\n [ngClass]=\"{'d-inline-block': inline()}\">\r\n <ng-container *ngTemplateOutlet=\"trigger()\"></ng-container>\r\n </div>\r\n\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"dropdown\" [cdkConnectedOverlayOpen]=\"show()\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\" (backdropClick)=\"show.set(false)\"\r\n [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\"\r\n cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n <div class=\"contenido\" [style.maxHeight.px]=\"altoContainer()\">\r\n <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\r\n </div>\r\n\r\n </ng-template>\r\n</div>", styles: [".contenido{width:100%;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
577
579
|
}
|
|
578
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DropdownCdkComponent, decorators: [{
|
|
579
581
|
type: Component,
|
|
580
|
-
args: [{ selector: 'app-dropdown-cdk', imports: [OverlayModule, NgTemplateOutlet, NgClass], template: "<div class=\"w-100\">\r\n\r\n <div \r\n cdkOverlayOrigin\r\n #dropdown=\"cdkOverlayOrigin\"\r\n (click)=\"show.set(true)\"\r\n [ngClass]=\"{'d-inline-block': inline()}\">\r\n <ng-container *ngTemplateOutlet=\"trigger()\"></ng-container>\r\n </div>\r\n\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"dropdown\" [cdkConnectedOverlayOpen]=\"show()\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\" (backdropClick)=\"show.set(false)\"\r\n cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n <div class=\"contenido\" [style.maxHeight.px]=\"altoContainer()\">\r\n <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\r\n </div>\r\n\r\n </ng-template>\r\n</div>", styles: [".contenido{width:100%;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}\n"] }]
|
|
582
|
+
args: [{ selector: 'app-dropdown-cdk', imports: [OverlayModule, NgTemplateOutlet, NgClass], template: "<div class=\"w-100\">\r\n\r\n <div \r\n cdkOverlayOrigin\r\n #dropdown=\"cdkOverlayOrigin\"\r\n (click)=\"show.set(true)\"\r\n [ngClass]=\"{'d-inline-block': inline()}\">\r\n <ng-container *ngTemplateOutlet=\"trigger()\"></ng-container>\r\n </div>\r\n\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"dropdown\" [cdkConnectedOverlayOpen]=\"show()\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\" (backdropClick)=\"show.set(false)\"\r\n [cdkConnectedOverlayPush]=\"true\" [cdkConnectedOverlayViewportMargin]=\"8\"\r\n cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n <div class=\"contenido\" [style.maxHeight.px]=\"altoContainer()\">\r\n <ng-container *ngTemplateOutlet=\"content()\"></ng-container>\r\n </div>\r\n\r\n </ng-template>\r\n</div>", styles: [".contenido{width:100%;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}\n"] }]
|
|
581
583
|
}] });
|
|
582
584
|
|
|
583
585
|
const fadeInOut = trigger('fadeInOut', [
|
|
@@ -634,10 +636,10 @@ class DropdownComponent {
|
|
|
634
636
|
this.selected.emit(item);
|
|
635
637
|
this.isOpen.set(false);
|
|
636
638
|
}
|
|
637
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
638
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
639
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
640
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DropdownComponent, isStandalone: true, selector: "app-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true }], ngImport: i0, template: "<div class=\"menu-content\" (click)=\"toggleDropdown()\">\r\n <button class=\"toggle\">\r\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n </button>\r\n @if (isOpen()) {\r\n <div class=\"menu-desplegable top-right\" @fadeInOut (click)=\"onDropdownClick($event)\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: '' }\"></ng-container>\r\n </div>\r\n } \r\n </div>", styles: [".menu-content{position:relative;display:inline-block}.toggle{padding:10px;background-color:#f6f6f6;color:#000;border:none;cursor:pointer;border-radius:4px;margin:0 10px}.toggle:focus{outline:none;box-shadow:none}.menu-desplegable{position:absolute;min-width:200px;border:1px solid #ccc;background:#fff;border-radius:4px;box-shadow:0 8px 16px #0003;z-index:1500;max-height:200px;overflow-y:auto}.menu-desplegable.top-left{top:100%;left:0}.menu-desplegable.top-right{top:100%;right:10px}.menu-desplegable.bottom-left{bottom:100%;left:0}.menu-desplegable.bottom-right{bottom:100%;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [fadeInOut] });
|
|
639
641
|
}
|
|
640
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
642
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
641
643
|
type: Component,
|
|
642
644
|
args: [{ selector: 'app-dropdown', imports: [CommonModule], animations: [fadeInOut], template: "<div class=\"menu-content\" (click)=\"toggleDropdown()\">\r\n <button class=\"toggle\">\r\n <i class=\"fa-solid fa-ellipsis-vertical\"></i>\r\n </button>\r\n @if (isOpen()) {\r\n <div class=\"menu-desplegable top-right\" @fadeInOut (click)=\"onDropdownClick($event)\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: '' }\"></ng-container>\r\n </div>\r\n } \r\n </div>", styles: [".menu-content{position:relative;display:inline-block}.toggle{padding:10px;background-color:#f6f6f6;color:#000;border:none;cursor:pointer;border-radius:4px;margin:0 10px}.toggle:focus{outline:none;box-shadow:none}.menu-desplegable{position:absolute;min-width:200px;border:1px solid #ccc;background:#fff;border-radius:4px;box-shadow:0 8px 16px #0003;z-index:1500;max-height:200px;overflow-y:auto}.menu-desplegable.top-left{top:100%;left:0}.menu-desplegable.top-right{top:100%;right:10px}.menu-desplegable.bottom-left{bottom:100%;left:0}.menu-desplegable.bottom-right{bottom:100%;right:0}\n"] }]
|
|
643
645
|
}], propDecorators: { customActions: [{
|
|
@@ -654,8 +656,8 @@ class FilterToggleComponent {
|
|
|
654
656
|
this.withFiltro.update(value => !value);
|
|
655
657
|
}
|
|
656
658
|
}
|
|
657
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
658
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
659
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FilterToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
660
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: FilterToggleComponent, isStandalone: true, selector: "app-filter-toggle", inputs: { hasData: { classPropertyName: "hasData", publicName: "hasData", isSignal: true, isRequired: false, transformFunction: null }, tamanio: { classPropertyName: "tamanio", publicName: "tamanio", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withFiltro: "withFiltroChange" }, ngImport: i0, template: `
|
|
659
661
|
<div class="d-flex align-items-center cursor-pointer"
|
|
660
662
|
[ngClass]="{ 'disabled-icon': !hasData() }">
|
|
661
663
|
<i class="fa-solid fa-filter px-2 me-1" [class]="'fs-' + tamanio()"></i>
|
|
@@ -664,7 +666,7 @@ class FilterToggleComponent {
|
|
|
664
666
|
</div>
|
|
665
667
|
`, isInline: true, styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
666
668
|
}
|
|
667
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
669
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FilterToggleComponent, decorators: [{
|
|
668
670
|
type: Component,
|
|
669
671
|
args: [{ selector: 'app-filter-toggle', imports: [CommonModule], template: `
|
|
670
672
|
<div class="d-flex align-items-center cursor-pointer"
|
|
@@ -695,10 +697,10 @@ class HeaderComponent {
|
|
|
695
697
|
cerrar() {
|
|
696
698
|
this.cerrarModal.emit();
|
|
697
699
|
}
|
|
698
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
699
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
700
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
701
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], 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"] }] });
|
|
700
702
|
}
|
|
701
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
703
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
702
704
|
type: Component,
|
|
703
705
|
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"] }]
|
|
704
706
|
}] });
|
|
@@ -864,12 +866,12 @@ class AutocompleteComponent {
|
|
|
864
866
|
emitirChange() {
|
|
865
867
|
this.changeInput.emit();
|
|
866
868
|
}
|
|
867
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
868
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
869
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
870
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", 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 }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, valuecod: { classPropertyName: "valuecod", publicName: "valuecod", isSignal: true, isRequired: false, transformFunction: null }, searchIdText: { classPropertyName: "searchIdText", publicName: "searchIdText", isSignal: true, isRequired: false, transformFunction: null }, disabled1: { classPropertyName: "disabled1", publicName: "disabled1", isSignal: true, isRequired: false, transformFunction: null }, disabled2: { classPropertyName: "disabled2", publicName: "disabled2", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, showId: { classPropertyName: "showId", publicName: "showId", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", 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 } }, outputs: { searchText: "searchTextChange", valuecod: "valuecodChange", searchIdText: "searchIdTextChange", disabled1: "disabled1Change", disabled2: "disabled2Change", changeInput: "changeInput" }, viewQueries: [{ propertyName: "autocompleteItems", predicate: ["autocompleteItem"], descendants: true }], ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n\r\n <div class=\"autocomplete d-flex \">\r\n @if(showId()){\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\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()\" [disabled]=\"disabled1()\" [(ngModel)]=\"searchIdText\"\r\n (input)=\"onSearchById()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n </div>\r\n }\r\n\r\n <div class=\"input-container content-2 me-2\">\r\n <input type=\"text\" [(ngModel)]=\"searchText\" class=\"form-select\"\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()\" [disabled]=\"disabled2()\" (input)=\"onSearch()\"\r\n (blur)=\"showDropdown.set(false)\" (click)=\"onClick()\" (keydown)=\"onKeyDown($event)\" />\r\n <ul [class.show]=\"showDropdown()\">\r\n @for (item of filteredItems(); track $index) {\r\n <li #autocompleteItem\r\n [ngClass]=\"{'fw-bold': selectedItem()[keyCodigo()] == item[keyCodigo()], 'bg-primary text-white': highlightedIndex() == $index}\"\r\n (mousedown)=\"selectItem(item)\">\r\n @if (joinInfo()) {\r\n {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n } @else{\r\n {{ item[keyDescri()] }}\r\n }\r\n @if (selectedItem()[keyCodigo()] == item[keyCodigo()]) {\r\n <i class=\"far fa-check-circle fw-bold text-success cw-20\"></i>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}.autocomplete ul{position:absolute;width:100%;border:1px solid #ccc;background:#fff;list-style:none;padding:0;margin:0;top:100%;left:0;max-height:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;z-index:1000;opacity:0;box-shadow:0 4px 6px #0000001a}.autocomplete ul.show{max-height:250px;overflow-y:auto;opacity:1}.autocomplete li{padding:8px;font-size:.7rem;font-weight:400;color:#353535;cursor:pointer}.autocomplete li:hover{background:#f0f0f0}.dropdown-arrow{position:absolute;right:15px;font-size:11px;transition:transform .3s ease-in-out;cursor:pointer;-webkit-user-select:none;user-select:none}@media(max-width:442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media(max-width:443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
869
871
|
}
|
|
870
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
872
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
871
873
|
type: Component,
|
|
872
|
-
args: [{ selector: 'app-autocomplete', imports: [NgClass, FormsModule], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n\r\n <div class=\"autocomplete d-flex \">\r\n @if(showId()){\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\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()\" [disabled]=\"disabled1()\" [(ngModel)]=\"searchIdText\"\r\n (input)=\"onSearchById()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n </div>\r\n }\r\n\r\n <div class=\"input-container content-2 me-2\">\r\n <input type=\"text\" [(ngModel)]=\"searchText\" class=\"form-select\"\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()\" [disabled]=\"disabled2()\" (input)=\"onSearch()\"\r\n (blur)=\"showDropdown.set(false)\" (click)=\"onClick()\" (keydown)=\"onKeyDown($event)\" />\r\n <ul [class.show]=\"showDropdown()\">\r\n @for (item of filteredItems(); track $index) {\r\n <li #autocompleteItem\r\n [ngClass]=\"{'fw-bold': selectedItem()[keyCodigo()] == item[keyCodigo()], 'bg-primary text-white': highlightedIndex() == $index}\"\r\n (mousedown)=\"selectItem(item)\">\r\n @if (joinInfo()) {\r\n {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n } @else{\r\n {{ item[keyDescri()] }}\r\n }\r\n @if (selectedItem()[keyCodigo()] == item[keyCodigo()]) {\r\n <i class=\"far fa-check-circle fw-bold text-success cw-20\"></i>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}.autocomplete ul{position:absolute;width:100%;border:1px solid #ccc;background:#fff;list-style:none;padding:0;margin:0;top:100%;left:0;max-height:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;z-index:1000;opacity:0;box-shadow:0 4px 6px #0000001a}.autocomplete ul.show{max-height:250px;overflow-y:auto;opacity:1}.autocomplete li{padding:8px;font-size:.7rem;font-weight:400;color:#353535;cursor:pointer}.autocomplete li:hover{background:#f0f0f0}.dropdown-arrow{position:absolute;right:15px;font-size:11px;transition:transform .3s ease-in-out;cursor:pointer;-webkit-user-select:none;user-select:none}@media
|
|
874
|
+
args: [{ selector: 'app-autocomplete', imports: [NgClass, FormsModule], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n\r\n <div class=\"autocomplete d-flex \">\r\n @if(showId()){\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\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()\" [disabled]=\"disabled1()\" [(ngModel)]=\"searchIdText\"\r\n (input)=\"onSearchById()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n </div>\r\n }\r\n\r\n <div class=\"input-container content-2 me-2\">\r\n <input type=\"text\" [(ngModel)]=\"searchText\" class=\"form-select\"\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()\" [disabled]=\"disabled2()\" (input)=\"onSearch()\"\r\n (blur)=\"showDropdown.set(false)\" (click)=\"onClick()\" (keydown)=\"onKeyDown($event)\" />\r\n <ul [class.show]=\"showDropdown()\">\r\n @for (item of filteredItems(); track $index) {\r\n <li #autocompleteItem\r\n [ngClass]=\"{'fw-bold': selectedItem()[keyCodigo()] == item[keyCodigo()], 'bg-primary text-white': highlightedIndex() == $index}\"\r\n (mousedown)=\"selectItem(item)\">\r\n @if (joinInfo()) {\r\n {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n } @else{\r\n {{ item[keyDescri()] }}\r\n }\r\n @if (selectedItem()[keyCodigo()] == item[keyCodigo()]) {\r\n <i class=\"far fa-check-circle fw-bold text-success cw-20\"></i>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}.autocomplete ul{position:absolute;width:100%;border:1px solid #ccc;background:#fff;list-style:none;padding:0;margin:0;top:100%;left:0;max-height:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;z-index:1000;opacity:0;box-shadow:0 4px 6px #0000001a}.autocomplete ul.show{max-height:250px;overflow-y:auto;opacity:1}.autocomplete li{padding:8px;font-size:.7rem;font-weight:400;color:#353535;cursor:pointer}.autocomplete li:hover{background:#f0f0f0}.dropdown-arrow{position:absolute;right:15px;font-size:11px;transition:transform .3s ease-in-out;cursor:pointer;-webkit-user-select:none;user-select:none}@media(max-width:442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media(max-width:443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}\n"] }]
|
|
873
875
|
}], ctorParameters: () => [], propDecorators: { autocompleteItems: [{
|
|
874
876
|
type: ViewChildren,
|
|
875
877
|
args: ['autocompleteItem']
|
|
@@ -889,10 +891,10 @@ class AnimatedCheckboxDirective {
|
|
|
889
891
|
this.renderer.addClass(label, this.cbClass);
|
|
890
892
|
}
|
|
891
893
|
}
|
|
892
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
893
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
894
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AnimatedCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
895
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: AnimatedCheckboxDirective, isStandalone: true, selector: "input[type=checkbox][animatedCheckbox]", inputs: { cbClass: "cbClass" }, ngImport: i0 });
|
|
894
896
|
}
|
|
895
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
897
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AnimatedCheckboxDirective, decorators: [{
|
|
896
898
|
type: Directive,
|
|
897
899
|
args: [{
|
|
898
900
|
selector: 'input[type=checkbox][animatedCheckbox]',
|
|
@@ -912,10 +914,10 @@ class CheckBoxComponent {
|
|
|
912
914
|
class = input('');
|
|
913
915
|
checked = input(false);
|
|
914
916
|
changeCheck = output();
|
|
915
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
916
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
917
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CheckBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
918
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: CheckBoxComponent, isStandalone: true, selector: "app-check-box", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, binding: { classPropertyName: "binding", publicName: "binding", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { binding: "bindingChange", changeCheck: "changeCheck" }, ngImport: i0, template: "<label [ngClass]=\"class()\" >\r\n <input type=\"checkbox\" animatedCheckbox [name]=\"name()\" [id]=\"id()\" [value]=\"value()\" [(ngModel)]=\"binding\" [disabled]=\"disabled()\"\r\n [checked]=\"checked()\" (change)=\"changeCheck.emit($event)\"\r\n >\r\n <span class=\"text-dark\">{{ label() }}</span>\r\n</label>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
917
919
|
}
|
|
918
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
920
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CheckBoxComponent, decorators: [{
|
|
919
921
|
type: Component,
|
|
920
922
|
args: [{ selector: 'app-check-box', imports: [FormsModule, NgClass, AnimatedCheckboxDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [ngClass]=\"class()\" >\r\n <input type=\"checkbox\" animatedCheckbox [name]=\"name()\" [id]=\"id()\" [value]=\"value()\" [(ngModel)]=\"binding\" [disabled]=\"disabled()\"\r\n [checked]=\"checked()\" (change)=\"changeCheck.emit($event)\"\r\n >\r\n <span class=\"text-dark\">{{ label() }}</span>\r\n</label>" }]
|
|
921
923
|
}] });
|
|
@@ -1082,12 +1084,12 @@ class AutocompleteV2Component {
|
|
|
1082
1084
|
const itemElement = this.autocompleteItems?.toArray()[index]?.nativeElement;
|
|
1083
1085
|
itemElement?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
1084
1086
|
}
|
|
1085
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1086
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AutocompleteV2Component, isStandalone: true, selector: "app-autocomplete-v2", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", 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 }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, searchIdText: { classPropertyName: "searchIdText", publicName: "searchIdText", isSignal: true, isRequired: false, transformFunction: null }, disabled1: { classPropertyName: "disabled1", publicName: "disabled1", isSignal: true, isRequired: false, transformFunction: null }, disabled2: { classPropertyName: "disabled2", publicName: "disabled2", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", 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 }, firstItemDefault: { classPropertyName: "firstItemDefault", publicName: "firstItemDefault", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, withCheckTodos: { classPropertyName: "withCheckTodos", publicName: "withCheckTodos", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchIdText: "searchIdTextChange", disabled1: "disabled1Change", disabled2: "disabled2Change", changeInput: "changeInput", value: "valueChange", searchText: "searchTextChange", allDisabled: "allDisabledChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "autocompleteItems", predicate: ["autocompleteItem"], descendants: true }], ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n\r\n <div class=\"autocomplete d-flex \">\r\n @if(computedType()){\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\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()\" [disabled]=\"allDisabled() ? true : disabled1()\"\r\n [(ngModel)]=\"value\" (blur)=\"blurKey()\" id=\"{{'id_value_' + label()}}\" name=\"{{'id_value_' + label()}}\" />\r\n </div>\r\n }\r\n\r\n <div class=\"input-container content-2 me-2\">\r\n <input type=\"text\" [autocomplete]=\"false\" [(ngModel)]=\"searchText\" class=\"form-control pe-4\" cdkOverlayOrigin\r\n #autocomplete=\"cdkOverlayOrigin\" #inputRef [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()\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" role=\"combobox\" aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"showDropdown()\" [attr.aria-controls]=\"listboxId()\"\r\n [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? (listboxId() + '_opt_' + highlightedIndex()) : null\"\r\n (input)=\"onSearchInput()\" (blur)=\"onBlur()\" (focus)=\"openDropdown()\" (keydown)=\"onKeyDown($event)\" />\r\n <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n <!-- @if (searchText().length > 0) {\r\n <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"clear(); inputRef.focus()\">\r\n ×\r\n </button>\r\n } @else {\r\n <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n } -->\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"onBlur()\"\r\n cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n <ul [style.maxHeight.px]=\"altoContainer()\" [id]=\"listboxId()\" role=\"listbox\">\r\n @for (item of filteredItems(); track $index) {\r\n <li #autocompleteItem class=\"text-dark\" role=\"option\" [id]=\"listboxId() + '_opt_' + $index\"\r\n [attr.aria-selected]=\"item[keyCodigo()] == value()\"\r\n [ngClass]=\"{'fw-bold': item[keyCodigo()] == value(), 'selected-item': highlightedIndex() == $index}\"\r\n (mousedown)=\"selectItem(item)\">\r\n @if (joinInfo()) {\r\n {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n } @else{\r\n {{ item[keyDescri()] }}\r\n }\r\n @if (item[keyCodigo()] == value()) {\r\n <i class=\"ms-2 far fa-check fw-bold text-success cw-20\"></i>\r\n }\r\n </li>\r\n } @empty {\r\n <li class=\"text-muted no-results\">Sin resultados</li>\r\n }\r\n </ul>\r\n </ng-template>\r\n </div>\r\n @if (withCheckTodos()) {\r\n <div class=\"px-2\"> <app-check-box label=\"Todos\" name=\"check_todos\" [value]=\"true\" [(binding)]=\"allDisabled\"\r\n (bindingChange)=\"value.set('');\" /></div>\r\n }\r\n </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;cursor:pointer;opacity:80%}li:hover{opacity:100%;background:#16161616}.no-results{cursor:default;text-align:center;opacity:60%}.no-results:hover{background:transparent}.dropdown-arrow{position:absolute;right:15px;font-size:11px;color:#6c757d;transition:transform .3s ease-in-out;pointer-events:none;-webkit-user-select:none;user-select:none}.dropdown-arrow.rotate-up{transform:rotate(180deg)}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media (max-width: 443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:15px;background:transparent;border:none;font-size:1.3rem;font-weight:300;line-height:1;cursor:pointer;padding:0}.selected-item{background:#0041ce!important;color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding", "class", "checked"], outputs: ["bindingChange", "changeCheck"] }], animations: [fadeInOut] });
|
|
1087
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutocompleteV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1088
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: AutocompleteV2Component, isStandalone: true, selector: "app-autocomplete-v2", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", 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 }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, searchIdText: { classPropertyName: "searchIdText", publicName: "searchIdText", isSignal: true, isRequired: false, transformFunction: null }, disabled1: { classPropertyName: "disabled1", publicName: "disabled1", isSignal: true, isRequired: false, transformFunction: null }, disabled2: { classPropertyName: "disabled2", publicName: "disabled2", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", 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 }, firstItemDefault: { classPropertyName: "firstItemDefault", publicName: "firstItemDefault", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, withCheckTodos: { classPropertyName: "withCheckTodos", publicName: "withCheckTodos", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchIdText: "searchIdTextChange", disabled1: "disabled1Change", disabled2: "disabled2Change", changeInput: "changeInput", value: "valueChange", searchText: "searchTextChange", allDisabled: "allDisabledChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "autocompleteItems", predicate: ["autocompleteItem"], descendants: true }], ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n\r\n <div class=\"autocomplete d-flex \">\r\n @if(computedType()){\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\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()\" [disabled]=\"allDisabled() ? true : disabled1()\"\r\n [(ngModel)]=\"value\" (blur)=\"blurKey()\" id=\"{{'id_value_' + label()}}\" name=\"{{'id_value_' + label()}}\" />\r\n </div>\r\n }\r\n\r\n <div class=\"input-container content-2 me-2\">\r\n <input type=\"text\" [autocomplete]=\"false\" [(ngModel)]=\"searchText\" class=\"form-control pe-4\" cdkOverlayOrigin\r\n #autocomplete=\"cdkOverlayOrigin\" #inputRef [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()\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" role=\"combobox\" aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"showDropdown()\" [attr.aria-controls]=\"listboxId()\"\r\n [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? (listboxId() + '_opt_' + highlightedIndex()) : null\"\r\n (input)=\"onSearchInput()\" (blur)=\"onBlur()\" (focus)=\"openDropdown()\" (keydown)=\"onKeyDown($event)\" />\r\n <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n <!-- @if (searchText().length > 0) {\r\n <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"clear(); inputRef.focus()\">\r\n ×\r\n </button>\r\n } @else {\r\n <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n } -->\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"onBlur()\"\r\n cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n <ul [style.maxHeight.px]=\"altoContainer()\" [id]=\"listboxId()\" role=\"listbox\">\r\n @for (item of filteredItems(); track $index) {\r\n <li #autocompleteItem class=\"text-dark\" role=\"option\" [id]=\"listboxId() + '_opt_' + $index\"\r\n [attr.aria-selected]=\"item[keyCodigo()] == value()\"\r\n [ngClass]=\"{'fw-bold': item[keyCodigo()] == value(), 'selected-item': highlightedIndex() == $index}\"\r\n (mousedown)=\"selectItem(item)\">\r\n @if (joinInfo()) {\r\n {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n } @else{\r\n {{ item[keyDescri()] }}\r\n }\r\n @if (item[keyCodigo()] == value()) {\r\n <i class=\"ms-2 far fa-check fw-bold text-success cw-20\"></i>\r\n }\r\n </li>\r\n } @empty {\r\n <li class=\"text-muted no-results\">Sin resultados</li>\r\n }\r\n </ul>\r\n </ng-template>\r\n </div>\r\n @if (withCheckTodos()) {\r\n <div class=\"px-2\"> <app-check-box label=\"Todos\" name=\"check_todos\" [value]=\"true\" [(binding)]=\"allDisabled\"\r\n (bindingChange)=\"value.set('');\" /></div>\r\n }\r\n </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;cursor:pointer;opacity:80%}li:hover{opacity:100%;background:#16161616}.no-results{cursor:default;text-align:center;opacity:60%}.no-results:hover{background:transparent}.dropdown-arrow{position:absolute;right:15px;font-size:11px;color:#6c757d;transition:transform .3s ease-in-out;pointer-events:none;-webkit-user-select:none;user-select:none}.dropdown-arrow.rotate-up{transform:rotate(180deg)}@media(max-width:442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media(max-width:443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:15px;background:transparent;border:none;font-size:1.3rem;font-weight:300;line-height:1;cursor:pointer;padding:0}.selected-item{background:#0041ce!important;color:#fff!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding", "class", "checked"], outputs: ["bindingChange", "changeCheck"] }], animations: [fadeInOut] });
|
|
1087
1089
|
}
|
|
1088
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1090
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AutocompleteV2Component, decorators: [{
|
|
1089
1091
|
type: Component,
|
|
1090
|
-
args: [{ selector: 'app-autocomplete-v2', imports: [NgClass, FormsModule, OverlayModule, CheckBoxComponent], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n\r\n <div class=\"autocomplete d-flex \">\r\n @if(computedType()){\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\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()\" [disabled]=\"allDisabled() ? true : disabled1()\"\r\n [(ngModel)]=\"value\" (blur)=\"blurKey()\" id=\"{{'id_value_' + label()}}\" name=\"{{'id_value_' + label()}}\" />\r\n </div>\r\n }\r\n\r\n <div class=\"input-container content-2 me-2\">\r\n <input type=\"text\" [autocomplete]=\"false\" [(ngModel)]=\"searchText\" class=\"form-control pe-4\" cdkOverlayOrigin\r\n #autocomplete=\"cdkOverlayOrigin\" #inputRef [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()\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" role=\"combobox\" aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"showDropdown()\" [attr.aria-controls]=\"listboxId()\"\r\n [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? (listboxId() + '_opt_' + highlightedIndex()) : null\"\r\n (input)=\"onSearchInput()\" (blur)=\"onBlur()\" (focus)=\"openDropdown()\" (keydown)=\"onKeyDown($event)\" />\r\n <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n <!-- @if (searchText().length > 0) {\r\n <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"clear(); inputRef.focus()\">\r\n ×\r\n </button>\r\n } @else {\r\n <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n } -->\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"onBlur()\"\r\n cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n <ul [style.maxHeight.px]=\"altoContainer()\" [id]=\"listboxId()\" role=\"listbox\">\r\n @for (item of filteredItems(); track $index) {\r\n <li #autocompleteItem class=\"text-dark\" role=\"option\" [id]=\"listboxId() + '_opt_' + $index\"\r\n [attr.aria-selected]=\"item[keyCodigo()] == value()\"\r\n [ngClass]=\"{'fw-bold': item[keyCodigo()] == value(), 'selected-item': highlightedIndex() == $index}\"\r\n (mousedown)=\"selectItem(item)\">\r\n @if (joinInfo()) {\r\n {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n } @else{\r\n {{ item[keyDescri()] }}\r\n }\r\n @if (item[keyCodigo()] == value()) {\r\n <i class=\"ms-2 far fa-check fw-bold text-success cw-20\"></i>\r\n }\r\n </li>\r\n } @empty {\r\n <li class=\"text-muted no-results\">Sin resultados</li>\r\n }\r\n </ul>\r\n </ng-template>\r\n </div>\r\n @if (withCheckTodos()) {\r\n <div class=\"px-2\"> <app-check-box label=\"Todos\" name=\"check_todos\" [value]=\"true\" [(binding)]=\"allDisabled\"\r\n (bindingChange)=\"value.set('');\" /></div>\r\n }\r\n </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;cursor:pointer;opacity:80%}li:hover{opacity:100%;background:#16161616}.no-results{cursor:default;text-align:center;opacity:60%}.no-results:hover{background:transparent}.dropdown-arrow{position:absolute;right:15px;font-size:11px;color:#6c757d;transition:transform .3s ease-in-out;pointer-events:none;-webkit-user-select:none;user-select:none}.dropdown-arrow.rotate-up{transform:rotate(180deg)}@media
|
|
1092
|
+
args: [{ selector: 'app-autocomplete-v2', imports: [NgClass, FormsModule, OverlayModule, CheckBoxComponent], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n\r\n <div class=\"autocomplete d-flex \">\r\n @if(computedType()){\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\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()\" [disabled]=\"allDisabled() ? true : disabled1()\"\r\n [(ngModel)]=\"value\" (blur)=\"blurKey()\" id=\"{{'id_value_' + label()}}\" name=\"{{'id_value_' + label()}}\" />\r\n </div>\r\n }\r\n\r\n <div class=\"input-container content-2 me-2\">\r\n <input type=\"text\" [autocomplete]=\"false\" [(ngModel)]=\"searchText\" class=\"form-control pe-4\" cdkOverlayOrigin\r\n #autocomplete=\"cdkOverlayOrigin\" #inputRef [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()\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" role=\"combobox\" aria-autocomplete=\"list\"\r\n aria-haspopup=\"listbox\" [attr.aria-expanded]=\"showDropdown()\" [attr.aria-controls]=\"listboxId()\"\r\n [attr.aria-activedescendant]=\"highlightedIndex() >= 0 ? (listboxId() + '_opt_' + highlightedIndex()) : null\"\r\n (input)=\"onSearchInput()\" (blur)=\"onBlur()\" (focus)=\"openDropdown()\" (keydown)=\"onKeyDown($event)\" />\r\n <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n <!-- @if (searchText().length > 0) {\r\n <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" [disabled]=\"allDisabled() ? true : disabled2()\"\r\n (mousedown)=\"$event.preventDefault()\" (click)=\"clear(); inputRef.focus()\">\r\n ×\r\n </button>\r\n } @else {\r\n <i class=\"dropdown-arrow fa-solid fa-chevron-down\" [class.rotate-up]=\"showDropdown()\"></i>\r\n } -->\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"onBlur()\"\r\n cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n <ul [style.maxHeight.px]=\"altoContainer()\" [id]=\"listboxId()\" role=\"listbox\">\r\n @for (item of filteredItems(); track $index) {\r\n <li #autocompleteItem class=\"text-dark\" role=\"option\" [id]=\"listboxId() + '_opt_' + $index\"\r\n [attr.aria-selected]=\"item[keyCodigo()] == value()\"\r\n [ngClass]=\"{'fw-bold': item[keyCodigo()] == value(), 'selected-item': highlightedIndex() == $index}\"\r\n (mousedown)=\"selectItem(item)\">\r\n @if (joinInfo()) {\r\n {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n } @else{\r\n {{ item[keyDescri()] }}\r\n }\r\n @if (item[keyCodigo()] == value()) {\r\n <i class=\"ms-2 far fa-check fw-bold text-success cw-20\"></i>\r\n }\r\n </li>\r\n } @empty {\r\n <li class=\"text-muted no-results\">Sin resultados</li>\r\n }\r\n </ul>\r\n </ng-template>\r\n </div>\r\n @if (withCheckTodos()) {\r\n <div class=\"px-2\"> <app-check-box label=\"Todos\" name=\"check_todos\" [value]=\"true\" [(binding)]=\"allDisabled\"\r\n (bindingChange)=\"value.set('');\" /></div>\r\n }\r\n </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;cursor:pointer;opacity:80%}li:hover{opacity:100%;background:#16161616}.no-results{cursor:default;text-align:center;opacity:60%}.no-results:hover{background:transparent}.dropdown-arrow{position:absolute;right:15px;font-size:11px;color:#6c757d;transition:transform .3s ease-in-out;pointer-events:none;-webkit-user-select:none;user-select:none}.dropdown-arrow.rotate-up{transform:rotate(180deg)}@media(max-width:442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media(max-width:443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:15px;background:transparent;border:none;font-size:1.3rem;font-weight:300;line-height:1;cursor:pointer;padding:0}.selected-item{background:#0041ce!important;color:#fff!important}\n"] }]
|
|
1091
1093
|
}], ctorParameters: () => [], propDecorators: { autocompleteItems: [{
|
|
1092
1094
|
type: ViewChildren,
|
|
1093
1095
|
args: ['autocompleteItem']
|
|
@@ -1183,12 +1185,12 @@ class DobleInputComponent {
|
|
|
1183
1185
|
const firstItem = getFirstItem(this.lista());
|
|
1184
1186
|
this.value.set(firstItem ? firstItem[this.keyCodigo()] : null);
|
|
1185
1187
|
}
|
|
1186
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1187
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DobleInputComponent, isStandalone: true, selector: "app-doble-input", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, withBuscar: { classPropertyName: "withBuscar", publicName: "withBuscar", isSignal: true, isRequired: false, transformFunction: null }, withBuscar2: { classPropertyName: "withBuscar2", publicName: "withBuscar2", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, tipoInput2: { classPropertyName: "tipoInput2", publicName: "tipoInput2", 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 }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, firstItemDefault: { classPropertyName: "firstItemDefault", publicName: "firstItemDefault", isSignal: true, isRequired: false, transformFunction: null }, disabled1: { classPropertyName: "disabled1", publicName: "disabled1", isSignal: true, isRequired: false, transformFunction: null }, disabled2: { classPropertyName: "disabled2", publicName: "disabled2", 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 }, 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 }, listName: { classPropertyName: "listName", publicName: "listName", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalidInput", isSignal: true, isRequired: false, transformFunction: null }, blur1: { classPropertyName: "blur1", publicName: "blur1", isSignal: true, isRequired: false, transformFunction: null }, enter1: { classPropertyName: "enter1", publicName: "enter1", isSignal: true, isRequired: false, transformFunction: null }, blur2: { classPropertyName: "blur2", publicName: "blur2", isSignal: true, isRequired: false, transformFunction: null }, enter2: { classPropertyName: "enter2", publicName: "enter2", isSignal: true, isRequired: false, transformFunction: null }, typeKey: { classPropertyName: "typeKey", publicName: "typeKey", isSignal: true, isRequired: false, transformFunction: null }, withAdicionalInfo: { classPropertyName: "withAdicionalInfo", publicName: "withAdicionalInfo", isSignal: true, isRequired: false, transformFunction: null }, validaLista: { classPropertyName: "validaLista", publicName: "validaLista", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled1: "disabled1Change", disabled2: "disabled2Change", value: "valueChange", value2: "value2Change", changeInput: "changeInput", invalidInput: "invalidInputChange", accion1: "accion1", accion2: "accion2" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\r\n (blur)=\"blur1()?.(); validaItem()\" (keyup.enter)=\"enter1()?.()\"\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()\" [disabled]=\"disabled1()\" [(ngModel)]=\"value\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n @if (withBuscar()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" (click)=\"accion1.emit()\">\r\n <i class=\"fa fa-search\"></i>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"w-100\">\r\n <div class=\"content-2 position-relative me-2\">\r\n @if (tipoInput2() == 2) {\r\n <select class=\"form-select\" [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()\" [(ngModel)]=\"value\" [disabled]=\"disabled2()\"\r\n id=\"{{'id_content' + label()}}\" name=\"{{'id_content' + label()}}\" (change)=\"emitirChange()\" (focus)=\"invalidInput.set(false)\">\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 <option [value]=\"item[keyCodigo()]\"> {{ joinInfoReal() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n item[keyDescri()]}}</option>\r\n }\r\n </select>\r\n }\r\n @if (tipoInput2() == 1) {\r\n <input type=\"text\" class=\"form-control\" (blur)=\"blur2()?.()\" (keyup.enter)=\"enter2()?.()\" [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()\" [disabled]=\"disabled2()\" id=\"{{'id_content' + label()}}\"\r\n [(ngModel)]=\"value2\"\r\n name=\"{{'id_content' + label()}}\" [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n @if (withBuscar2()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" (click)=\"accion2.emit()\">\r\n <i class=\"fa fa-search\"></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 \r\n</div>", styles: [".content-1{flex-basis:30%;display:flex;align-items:center}.content-2{flex-basis:70%;display:flex;align-items:center}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.show-input{display:none}@media (min-width: 443px){.show-input{display:block}}.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}.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))}@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}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [fadeInOut] });
|
|
1188
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DobleInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1189
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DobleInputComponent, isStandalone: true, selector: "app-doble-input", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, withBuscar: { classPropertyName: "withBuscar", publicName: "withBuscar", isSignal: true, isRequired: false, transformFunction: null }, withBuscar2: { classPropertyName: "withBuscar2", publicName: "withBuscar2", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, tipoInput2: { classPropertyName: "tipoInput2", publicName: "tipoInput2", 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 }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, firstItemDefault: { classPropertyName: "firstItemDefault", publicName: "firstItemDefault", isSignal: true, isRequired: false, transformFunction: null }, disabled1: { classPropertyName: "disabled1", publicName: "disabled1", isSignal: true, isRequired: false, transformFunction: null }, disabled2: { classPropertyName: "disabled2", publicName: "disabled2", 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 }, 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 }, listName: { classPropertyName: "listName", publicName: "listName", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalidInput", isSignal: true, isRequired: false, transformFunction: null }, blur1: { classPropertyName: "blur1", publicName: "blur1", isSignal: true, isRequired: false, transformFunction: null }, enter1: { classPropertyName: "enter1", publicName: "enter1", isSignal: true, isRequired: false, transformFunction: null }, blur2: { classPropertyName: "blur2", publicName: "blur2", isSignal: true, isRequired: false, transformFunction: null }, enter2: { classPropertyName: "enter2", publicName: "enter2", isSignal: true, isRequired: false, transformFunction: null }, typeKey: { classPropertyName: "typeKey", publicName: "typeKey", isSignal: true, isRequired: false, transformFunction: null }, withAdicionalInfo: { classPropertyName: "withAdicionalInfo", publicName: "withAdicionalInfo", isSignal: true, isRequired: false, transformFunction: null }, validaLista: { classPropertyName: "validaLista", publicName: "validaLista", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled1: "disabled1Change", disabled2: "disabled2Change", value: "valueChange", value2: "value2Change", changeInput: "changeInput", invalidInput: "invalidInputChange", accion1: "accion1", accion2: "accion2" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\r\n (blur)=\"blur1()?.(); validaItem()\" (keyup.enter)=\"enter1()?.()\"\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()\" [disabled]=\"disabled1()\" [(ngModel)]=\"value\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n @if (withBuscar()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" (click)=\"accion1.emit()\">\r\n <i class=\"fa fa-search\"></i>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"w-100\">\r\n <div class=\"content-2 position-relative me-2\">\r\n @if (tipoInput2() == 2) {\r\n <select class=\"form-select\" [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()\" [(ngModel)]=\"value\" [disabled]=\"disabled2()\"\r\n id=\"{{'id_content' + label()}}\" name=\"{{'id_content' + label()}}\" (change)=\"emitirChange()\" (focus)=\"invalidInput.set(false)\">\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 <option [value]=\"item[keyCodigo()]\"> {{ joinInfoReal() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n item[keyDescri()]}}</option>\r\n }\r\n </select>\r\n }\r\n @if (tipoInput2() == 1) {\r\n <input type=\"text\" class=\"form-control\" (blur)=\"blur2()?.()\" (keyup.enter)=\"enter2()?.()\" [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()\" [disabled]=\"disabled2()\" id=\"{{'id_content' + label()}}\"\r\n [(ngModel)]=\"value2\"\r\n name=\"{{'id_content' + label()}}\" [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n @if (withBuscar2()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" (click)=\"accion2.emit()\">\r\n <i class=\"fa fa-search\"></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 \r\n</div>", styles: [".content-1{flex-basis:30%;display:flex;align-items:center}.content-2{flex-basis:70%;display:flex;align-items:center}@media(max-width:442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.show-input{display:none}@media(min-width:443px){.show-input{display:block}}.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}.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))}@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}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [fadeInOut] });
|
|
1188
1190
|
}
|
|
1189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DobleInputComponent, decorators: [{
|
|
1190
1192
|
type: Component,
|
|
1191
|
-
args: [{ selector: 'app-doble-input', imports: [FormsModule], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\r\n (blur)=\"blur1()?.(); validaItem()\" (keyup.enter)=\"enter1()?.()\"\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()\" [disabled]=\"disabled1()\" [(ngModel)]=\"value\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n @if (withBuscar()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" (click)=\"accion1.emit()\">\r\n <i class=\"fa fa-search\"></i>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"w-100\">\r\n <div class=\"content-2 position-relative me-2\">\r\n @if (tipoInput2() == 2) {\r\n <select class=\"form-select\" [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()\" [(ngModel)]=\"value\" [disabled]=\"disabled2()\"\r\n id=\"{{'id_content' + label()}}\" name=\"{{'id_content' + label()}}\" (change)=\"emitirChange()\" (focus)=\"invalidInput.set(false)\">\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 <option [value]=\"item[keyCodigo()]\"> {{ joinInfoReal() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n item[keyDescri()]}}</option>\r\n }\r\n </select>\r\n }\r\n @if (tipoInput2() == 1) {\r\n <input type=\"text\" class=\"form-control\" (blur)=\"blur2()?.()\" (keyup.enter)=\"enter2()?.()\" [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()\" [disabled]=\"disabled2()\" id=\"{{'id_content' + label()}}\"\r\n [(ngModel)]=\"value2\"\r\n name=\"{{'id_content' + label()}}\" [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n @if (withBuscar2()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" (click)=\"accion2.emit()\">\r\n <i class=\"fa fa-search\"></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 \r\n</div>", styles: [".content-1{flex-basis:30%;display:flex;align-items:center}.content-2{flex-basis:70%;display:flex;align-items:center}@media
|
|
1193
|
+
args: [{ selector: 'app-doble-input', imports: [FormsModule], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\r\n (blur)=\"blur1()?.(); validaItem()\" (keyup.enter)=\"enter1()?.()\"\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()\" [disabled]=\"disabled1()\" [(ngModel)]=\"value\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n @if (withBuscar()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" (click)=\"accion1.emit()\">\r\n <i class=\"fa fa-search\"></i>\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"w-100\">\r\n <div class=\"content-2 position-relative me-2\">\r\n @if (tipoInput2() == 2) {\r\n <select class=\"form-select\" [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()\" [(ngModel)]=\"value\" [disabled]=\"disabled2()\"\r\n id=\"{{'id_content' + label()}}\" name=\"{{'id_content' + label()}}\" (change)=\"emitirChange()\" (focus)=\"invalidInput.set(false)\">\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 <option [value]=\"item[keyCodigo()]\"> {{ joinInfoReal() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n item[keyDescri()]}}</option>\r\n }\r\n </select>\r\n }\r\n @if (tipoInput2() == 1) {\r\n <input type=\"text\" class=\"form-control\" (blur)=\"blur2()?.()\" (keyup.enter)=\"enter2()?.()\" [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()\" [disabled]=\"disabled2()\" id=\"{{'id_content' + label()}}\"\r\n [(ngModel)]=\"value2\"\r\n name=\"{{'id_content' + label()}}\" [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n }\r\n @if (withBuscar2()) {\r\n <button class=\"btn btn-dark boton-buscar fs-7\" (click)=\"accion2.emit()\">\r\n <i class=\"fa fa-search\"></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 \r\n</div>", styles: [".content-1{flex-basis:30%;display:flex;align-items:center}.content-2{flex-basis:70%;display:flex;align-items:center}@media(max-width:442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.show-input{display:none}@media(min-width:443px){.show-input{display:block}}.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}.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))}@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}}\n"] }]
|
|
1192
1194
|
}], ctorParameters: () => [], propDecorators: { onResize: [{
|
|
1193
1195
|
type: HostListener,
|
|
1194
1196
|
args: ['window:resize']
|
|
@@ -1225,10 +1227,10 @@ class DecimalDirective {
|
|
|
1225
1227
|
const formatted = this.decimalPipe.transform(value, (this.appDecimal() ?? '1.2-2'));
|
|
1226
1228
|
this.elementRef.nativeElement.value = formatted !== null ? formatted : this.decimalPipe.transform(0, (this.appDecimal() ?? '1.2-2'));
|
|
1227
1229
|
}
|
|
1228
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1229
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
1230
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DecimalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1231
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: DecimalDirective, isStandalone: true, selector: "[appDecimal]", inputs: { appDecimal: { classPropertyName: "appDecimal", publicName: "appDecimal", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "onBlur()" } }, providers: [DecimalPipe], ngImport: i0 });
|
|
1230
1232
|
}
|
|
1231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1233
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DecimalDirective, decorators: [{
|
|
1232
1234
|
type: Directive,
|
|
1233
1235
|
args: [{
|
|
1234
1236
|
selector: '[appDecimal]',
|
|
@@ -1277,10 +1279,10 @@ class OnlyNumberDirective {
|
|
|
1277
1279
|
input.dispatchEvent(new Event('input'));
|
|
1278
1280
|
}
|
|
1279
1281
|
}
|
|
1280
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1281
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1282
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlyNumberDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1283
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: OnlyNumberDirective, isStandalone: true, selector: "[onlyNumber]", host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)", "input": "onInput()" } }, ngImport: i0 });
|
|
1282
1284
|
}
|
|
1283
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1285
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlyNumberDirective, decorators: [{
|
|
1284
1286
|
type: Directive,
|
|
1285
1287
|
args: [{
|
|
1286
1288
|
selector: '[onlyNumber]'
|
|
@@ -1332,10 +1334,10 @@ class OnlyDayDirective {
|
|
|
1332
1334
|
event.preventDefault();
|
|
1333
1335
|
}
|
|
1334
1336
|
}
|
|
1335
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1336
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1337
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlyDayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1338
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: OnlyDayDirective, isStandalone: true, selector: "[onlyDay]", host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)" } }, ngImport: i0 });
|
|
1337
1339
|
}
|
|
1338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlyDayDirective, decorators: [{
|
|
1339
1341
|
type: Directive,
|
|
1340
1342
|
args: [{
|
|
1341
1343
|
selector: '[onlyDay]'
|
|
@@ -1378,10 +1380,10 @@ class SwitchActivoComponent {
|
|
|
1378
1380
|
currentIcon() {
|
|
1379
1381
|
return this._checked ? this.iconOn() : this.iconOff();
|
|
1380
1382
|
}
|
|
1381
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1382
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1383
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SwitchActivoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1383
1385
|
}
|
|
1384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1386
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SwitchActivoComponent, decorators: [{
|
|
1385
1387
|
type: Component,
|
|
1386
1388
|
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"] }]
|
|
1387
1389
|
}], ctorParameters: () => [] });
|
|
@@ -1420,10 +1422,10 @@ class OnlyNumberFlexDirective {
|
|
|
1420
1422
|
input.setSelectionRange(cursorPosition, cursorPosition);
|
|
1421
1423
|
input.dispatchEvent(new Event('input'));
|
|
1422
1424
|
}
|
|
1423
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1424
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
1425
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlyNumberFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1426
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: OnlyNumberFlexDirective, isStandalone: true, selector: "[onlyNumberFlex]", host: { listeners: { "keypress": "onKeyPress($event)", "paste": "onPaste($event)" } }, ngImport: i0 });
|
|
1425
1427
|
}
|
|
1426
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlyNumberFlexDirective, decorators: [{
|
|
1427
1429
|
type: Directive,
|
|
1428
1430
|
args: [{
|
|
1429
1431
|
selector: '[onlyNumberFlex]'
|
|
@@ -1482,10 +1484,10 @@ class CaracteresCodigoDirective {
|
|
|
1482
1484
|
this.toast.warning('Advertencia', `Solo se permiten caracteres alfanuméricos, guion (-), punto (.) y slash (/)`);
|
|
1483
1485
|
}
|
|
1484
1486
|
}
|
|
1485
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1486
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
1487
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaracteresCodigoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1488
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: CaracteresCodigoDirective, isStandalone: true, selector: "[caracteresCodigo]", inputs: { caracteresCodigo: { classPropertyName: "caracteresCodigo", publicName: "caracteresCodigo", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keypress": "onKeyPress($event)", "input": "onInput($event)", "paste": "onPaste($event)", "drop": "onDrop($event)" } }, ngImport: i0 });
|
|
1487
1489
|
}
|
|
1488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CaracteresCodigoDirective, decorators: [{
|
|
1489
1491
|
type: Directive,
|
|
1490
1492
|
args: [{
|
|
1491
1493
|
selector: '[caracteresCodigo]'
|
|
@@ -1612,12 +1614,12 @@ class InputComponent {
|
|
|
1612
1614
|
const encontrar = this.lista().find(item => item[this.keyCodigo()] == this.value());
|
|
1613
1615
|
this.changeInput.emit(encontrar);
|
|
1614
1616
|
}
|
|
1615
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1616
|
-
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 }, inputErrorFn: { classPropertyName: "inputErrorFn", publicName: "inputErrorFn", 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 [class.input-error]=\"hasError()\"\r\n (focus)=\"invalidInput.set(false)\" autocomplete=\"off\"\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()\" \r\n [class.input-error]=\"hasError()\"\r\n [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 [class.input-error]=\"hasError()\"\r\n [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 [class.input-error]=\"hasError()\"\r\n [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()\" \r\n [class.input-error]=\"hasError()\"\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()\" \r\n [class.input-error]=\"hasError()\"\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()\" \r\n [class.input-error]=\"hasError()\"\r\n [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()\" \r\n [class.input-error]=\"hasError()\"\r\n [(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$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.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 });
|
|
1617
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1618
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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 }, inputErrorFn: { classPropertyName: "inputErrorFn", publicName: "inputErrorFn", 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 [class.input-error]=\"hasError()\"\r\n (focus)=\"invalidInput.set(false)\" autocomplete=\"off\"\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()\" \r\n [class.input-error]=\"hasError()\"\r\n [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 [class.input-error]=\"hasError()\"\r\n [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 [class.input-error]=\"hasError()\"\r\n [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()\" \r\n [class.input-error]=\"hasError()\"\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()\" \r\n [class.input-error]=\"hasError()\"\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()\" \r\n [class.input-error]=\"hasError()\"\r\n [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()\" \r\n [class.input-error]=\"hasError()\"\r\n [(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$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.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 });
|
|
1617
1619
|
}
|
|
1618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1620
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputComponent, decorators: [{
|
|
1619
1621
|
type: Component,
|
|
1620
|
-
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 [class.input-error]=\"hasError()\"\r\n (focus)=\"invalidInput.set(false)\" autocomplete=\"off\"\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()\" \r\n [class.input-error]=\"hasError()\"\r\n [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 [class.input-error]=\"hasError()\"\r\n [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 [class.input-error]=\"hasError()\"\r\n [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()\" \r\n [class.input-error]=\"hasError()\"\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()\" \r\n [class.input-error]=\"hasError()\"\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()\" \r\n [class.input-error]=\"hasError()\"\r\n [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()\" \r\n [class.input-error]=\"hasError()\"\r\n [(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"] }]
|
|
1622
|
+
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 [class.input-error]=\"hasError()\"\r\n (focus)=\"invalidInput.set(false)\" autocomplete=\"off\"\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()\" \r\n [class.input-error]=\"hasError()\"\r\n [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 [class.input-error]=\"hasError()\"\r\n [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 [class.input-error]=\"hasError()\"\r\n [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()\" \r\n [class.input-error]=\"hasError()\"\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()\" \r\n [class.input-error]=\"hasError()\"\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()\" \r\n [class.input-error]=\"hasError()\"\r\n [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()\" \r\n [class.input-error]=\"hasError()\"\r\n [(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"] }]
|
|
1621
1623
|
}], ctorParameters: () => [] });
|
|
1622
1624
|
|
|
1623
1625
|
class InputClaseComponent {
|
|
@@ -1632,10 +1634,10 @@ class InputClaseComponent {
|
|
|
1632
1634
|
getClase(data) {
|
|
1633
1635
|
return obtenerTipoClases(data);
|
|
1634
1636
|
}
|
|
1635
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1636
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1637
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputClaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1638
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputClaseComponent, isStandalone: true, selector: "app-input-clase", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBlur: "onBlur", value: "valueChange", disabled: "disabledChange" }, ngImport: i0, template: "\r\n<div class=\"col-md-8 pt-1\">\r\n @switch (tipoInput()) {\r\n @case ('vchar') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" [maxLength]=\"1\" (onBlur)=\"onBlur.emit()\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\" />\r\n }\r\n @case ('vstrg') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" [maxLength]=\"80\" (onBlur)=\"onBlur.emit()\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('ventero') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" position=\"end\" type=\"number-integer\" (onBlur)=\"onBlur.emit()\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('vreal') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" position=\"end\" type=\"number-format-decimal\" (onBlur)=\"onBlur.emit()\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('vdate') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" (onBlur)=\"onBlur.emit()\" type=\"date\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('vtime') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" (onBlur)=\"onBlur.emit()\" type=\"date\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('vglosa') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" (onBlur)=\"onBlur.emit()\" type=\"text-area\" [alto]=\"5\" [maxLength]=\"500\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('codigo') {\r\n <app-doble-input [label]=\"title()\" [isRequired]=\"required()\" [tipoInput2]=\"2\" [withTodos]=\"false\" keyCodigo=\"codigo\" keyDescri=\"descri\" [lista]=\"item().codigos\" (onBlur)=\"onBlur.emit()\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled1)]=\"disabled\" [(disabled2)]=\"disabled\" ></app-doble-input>\r\n }\r\n }\r\n \r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: InputComponent, selector: "app-input", inputs: ["wlabel", "label", "placeholder", "withBuscar", "iconButton", "classButton", "isRequired", "type", "position", "value", "value2", "position_row", "withChangeInput", "disabled", "isImportant", "lista", "keyCodigo", "keyDescri", "joinInfo", "withTodos", "allDisabled", "isVertical", "alto", "formatNumber", "blur", "enter", "keyup", "invalidInput", "activeFocus", "customBorderColor", "customBoxShadow", "customTransition", "maxLength", "textoAyuda", "sinAyuda", "maxWidth", "showTopLabel", "topLabelText", "firstItemDefault", "typeKey", "validaCodigo", "inputErrorFn"], outputs: ["valueChange", "value2Change", "disabledChange", "allDisabledChange", "invalidInputChange", "accion", "changeInput"] }, { kind: "component", type: DobleInputComponent, selector: "app-doble-input", inputs: ["wlabel", "label", "withBuscar", "withBuscar2", "isRequired", "tipoInput2", "lista", "keyCodigo", "keyDescri", "joinInfo", "isVertical", "withTodos", "firstItemDefault", "disabled1", "disabled2", "value", "value2", "activeFocus", "customBorderColor", "customBoxShadow", "customTransition", "maxLength", "listName", "invalidInput", "blur1", "enter1", "blur2", "enter2", "typeKey", "withAdicionalInfo", "validaLista"], outputs: ["disabled1Change", "disabled2Change", "valueChange", "value2Change", "changeInput", "invalidInputChange", "accion1", "accion2"] }] });
|
|
1637
1639
|
}
|
|
1638
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputClaseComponent, decorators: [{
|
|
1639
1641
|
type: Component,
|
|
1640
1642
|
args: [{ selector: 'app-input-clase', imports: [InputComponent, DobleInputComponent], template: "\r\n<div class=\"col-md-8 pt-1\">\r\n @switch (tipoInput()) {\r\n @case ('vchar') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" [maxLength]=\"1\" (onBlur)=\"onBlur.emit()\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\" />\r\n }\r\n @case ('vstrg') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" [maxLength]=\"80\" (onBlur)=\"onBlur.emit()\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('ventero') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" position=\"end\" type=\"number-integer\" (onBlur)=\"onBlur.emit()\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('vreal') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" position=\"end\" type=\"number-format-decimal\" (onBlur)=\"onBlur.emit()\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('vdate') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" (onBlur)=\"onBlur.emit()\" type=\"date\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('vtime') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" (onBlur)=\"onBlur.emit()\" type=\"date\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('vglosa') {\r\n <app-input [label]=\"title()\" [isRequired]=\"required()\" (onBlur)=\"onBlur.emit()\" type=\"text-area\" [alto]=\"5\" [maxLength]=\"500\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled)]=\"disabled\"/>\r\n }\r\n @case ('codigo') {\r\n <app-doble-input [label]=\"title()\" [isRequired]=\"required()\" [tipoInput2]=\"2\" [withTodos]=\"false\" keyCodigo=\"codigo\" keyDescri=\"descri\" [lista]=\"item().codigos\" (onBlur)=\"onBlur.emit()\" [wlabel]=\"wlabel()\" [(value)]=\"value\" [(disabled1)]=\"disabled\" [(disabled2)]=\"disabled\" ></app-doble-input>\r\n }\r\n }\r\n \r\n</div>\r\n" }]
|
|
1641
1643
|
}] });
|
|
@@ -1643,10 +1645,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1643
1645
|
class InputDinamicoComponent {
|
|
1644
1646
|
inputs = input([]);
|
|
1645
1647
|
sender = model();
|
|
1646
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1647
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1648
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputDinamicoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1649
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputDinamicoComponent, isStandalone: true, selector: "app-input-dinamico", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, sender: { classPropertyName: "sender", publicName: "sender", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sender: "senderChange" }, ngImport: i0, template: "@for (input of inputs(); track $index) {\r\n<div class=\"{{ input.class }}\">\r\n @switch (input.modelo) { \r\n @case ('input-buscar') {\r\n <!-- <app-doble-input-buscar\r\n label=\"{{ input.label }}\"\r\n [(disabled)]=\"input.disabled\"\r\n [isRequired]=\"input.required\"\r\n [wlabel]=\"input.wlabel\"\r\n [maxLength]=\"input.maxlen\"\r\n [(valuecod)]=\"sender()[input.fieldname]\"\r\n [type]=\"input.buscar\"\r\n [oneinput]=\"true\"\r\n [withBuscar2]=\"true\"\r\n [joinInfo]=\"input.joinInfo\"\r\n [withBuscar]=\"true\"\r\n [viewInput]=\"input.viewInput\"\r\n /> -->\r\n }\r\n @default {\r\n <app-input\r\n label=\"{{ input.label }}\"\r\n [(disabled)]=\"input.disabled\"\r\n [isRequired]=\"input.required\"\r\n [wlabel]=\"input.wlabel\"\r\n [maxLength]=\"input.maxlen\"\r\n [(value)]=\"sender()[input.fieldname]\"\r\n [position]=\"input.position\"\r\n [type]=\"input.type\"\r\n [lista]=\"input.lista\"\r\n [keyCodigo]=\"input.keyCodigo\"\r\n [keyDescri]=\"input.keyDescri\"\r\n [withTodos]=\"input.withTodos\"\r\n [joinInfo]=\"input.joinInfo\"\r\n />\r\n } \r\n\r\n }\r\n \r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: InputComponent, selector: "app-input", inputs: ["wlabel", "label", "placeholder", "withBuscar", "iconButton", "classButton", "isRequired", "type", "position", "value", "value2", "position_row", "withChangeInput", "disabled", "isImportant", "lista", "keyCodigo", "keyDescri", "joinInfo", "withTodos", "allDisabled", "isVertical", "alto", "formatNumber", "blur", "enter", "keyup", "invalidInput", "activeFocus", "customBorderColor", "customBoxShadow", "customTransition", "maxLength", "textoAyuda", "sinAyuda", "maxWidth", "showTopLabel", "topLabelText", "firstItemDefault", "typeKey", "validaCodigo", "inputErrorFn"], outputs: ["valueChange", "value2Change", "disabledChange", "allDisabledChange", "invalidInputChange", "accion", "changeInput"] }] });
|
|
1648
1650
|
}
|
|
1649
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1651
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputDinamicoComponent, decorators: [{
|
|
1650
1652
|
type: Component,
|
|
1651
1653
|
args: [{ selector: 'app-input-dinamico', imports: [InputComponent], template: "@for (input of inputs(); track $index) {\r\n<div class=\"{{ input.class }}\">\r\n @switch (input.modelo) { \r\n @case ('input-buscar') {\r\n <!-- <app-doble-input-buscar\r\n label=\"{{ input.label }}\"\r\n [(disabled)]=\"input.disabled\"\r\n [isRequired]=\"input.required\"\r\n [wlabel]=\"input.wlabel\"\r\n [maxLength]=\"input.maxlen\"\r\n [(valuecod)]=\"sender()[input.fieldname]\"\r\n [type]=\"input.buscar\"\r\n [oneinput]=\"true\"\r\n [withBuscar2]=\"true\"\r\n [joinInfo]=\"input.joinInfo\"\r\n [withBuscar]=\"true\"\r\n [viewInput]=\"input.viewInput\"\r\n /> -->\r\n }\r\n @default {\r\n <app-input\r\n label=\"{{ input.label }}\"\r\n [(disabled)]=\"input.disabled\"\r\n [isRequired]=\"input.required\"\r\n [wlabel]=\"input.wlabel\"\r\n [maxLength]=\"input.maxlen\"\r\n [(value)]=\"sender()[input.fieldname]\"\r\n [position]=\"input.position\"\r\n [type]=\"input.type\"\r\n [lista]=\"input.lista\"\r\n [keyCodigo]=\"input.keyCodigo\"\r\n [keyDescri]=\"input.keyDescri\"\r\n [withTodos]=\"input.withTodos\"\r\n [joinInfo]=\"input.joinInfo\"\r\n />\r\n } \r\n\r\n }\r\n \r\n</div>\r\n}\r\n" }]
|
|
1652
1654
|
}] });
|
|
@@ -1663,10 +1665,10 @@ class RadioComponent {
|
|
|
1663
1665
|
handleChange() {
|
|
1664
1666
|
this.changed.emit(this.value());
|
|
1665
1667
|
}
|
|
1666
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1667
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
1668
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1669
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: RadioComponent, isStandalone: true, selector: "app-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, binding: { classPropertyName: "binding", publicName: "binding", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { binding: "bindingChange", changed: "changed" }, ngImport: i0, template: "<div class=\"form-check me-2\">\r\n <input class=\"form-check-input\" type=\"radio\" [name]=\"name()\" [id]=\"id()\" [value]=\"value()\" [disabled]=\"disabled()\"\r\n (change)=\"handleChange()\" [(ngModel)]=\"binding\" >\r\n <label class=\"form-check-label cursor-pointer\" [for]=\"id()\">\r\n {{ label() }}\r\n </label>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1668
1670
|
}
|
|
1669
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1671
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1670
1672
|
type: Component,
|
|
1671
1673
|
args: [{ selector: 'app-radio', imports: [FormsModule], template: "<div class=\"form-check me-2\">\r\n <input class=\"form-check-input\" type=\"radio\" [name]=\"name()\" [id]=\"id()\" [value]=\"value()\" [disabled]=\"disabled()\"\r\n (change)=\"handleChange()\" [(ngModel)]=\"binding\" >\r\n <label class=\"form-check-label cursor-pointer\" [for]=\"id()\">\r\n {{ label() }}\r\n </label>\r\n</div>" }]
|
|
1672
1674
|
}] });
|
|
@@ -1691,12 +1693,12 @@ class InputRadioComponent {
|
|
|
1691
1693
|
customBorderColor = input('');
|
|
1692
1694
|
customBoxShadow = input('');
|
|
1693
1695
|
customTransition = input('');
|
|
1694
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1695
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1696
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1697
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputRadioComponent, isStandalone: true, selector: "app-input-radio", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, onlyRow: { classPropertyName: "onlyRow", publicName: "onlyRow", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, position_row: { classPropertyName: "position_row", publicName: "position_row", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", 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 } }, outputs: { value: "valueChange", disabled: "disabledChange", allDisabled: "allDisabledChange" }, ngImport: i0, template: "<div class=\"d-flex\" [attr.data-force]=\"onlyRow() ? 'true' : 'false'\">\r\n @if (isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [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 for=\"{{'id_' + label()}}\" [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 class=\"d-flex\" [attr.data-force]=\"onlyRow() ? 'true' : 'false'\"\r\n [ngClass]=\"onlyRow() ? 'flex-row-force' : 'flex-' + position()\">\r\n @for (item of lista(); track $index) {\r\n @switch (type()) {\r\n @case ('radio') {\r\n <app-radio [name]=\"name()\" [label]=\"item[keyDescri()]\" [disabled]=\"allDisabled()\"\r\n [value]=\"item[keyCodigo()]\" [id]=\"`radio_${item[keyCodigo()]}_${item[keyDescri()]}`\"\r\n [(binding)]=\"value\" />\r\n }\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".d-flex[data-force=true]{flex-direction:row!important}@media(max-width:442px){.d-flex[data-force=false]{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))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["name", "id", "label", "value", "binding", "checked", "disabled"], outputs: ["bindingChange", "changed"] }], animations: [fadeInOut] });
|
|
1696
1698
|
}
|
|
1697
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1699
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputRadioComponent, decorators: [{
|
|
1698
1700
|
type: Component,
|
|
1699
|
-
args: [{ selector: 'app-input-radio', imports: [FormsModule, CommonModule, RadioComponent], animations: [fadeInOut], template: "<div class=\"d-flex\" [attr.data-force]=\"onlyRow() ? 'true' : 'false'\">\r\n @if (isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [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 for=\"{{'id_' + label()}}\" [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 class=\"d-flex\" [attr.data-force]=\"onlyRow() ? 'true' : 'false'\"\r\n [ngClass]=\"onlyRow() ? 'flex-row-force' : 'flex-' + position()\">\r\n @for (item of lista(); track $index) {\r\n @switch (type()) {\r\n @case ('radio') {\r\n <app-radio [name]=\"name()\" [label]=\"item[keyDescri()]\" [disabled]=\"allDisabled()\"\r\n [value]=\"item[keyCodigo()]\" [id]=\"`radio_${item[keyCodigo()]}_${item[keyDescri()]}`\"\r\n [(binding)]=\"value\" />\r\n }\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".d-flex[data-force=true]{flex-direction:row!important}@media
|
|
1701
|
+
args: [{ selector: 'app-input-radio', imports: [FormsModule, CommonModule, RadioComponent], animations: [fadeInOut], template: "<div class=\"d-flex\" [attr.data-force]=\"onlyRow() ? 'true' : 'false'\">\r\n @if (isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [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 for=\"{{'id_' + label()}}\" [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 class=\"d-flex\" [attr.data-force]=\"onlyRow() ? 'true' : 'false'\"\r\n [ngClass]=\"onlyRow() ? 'flex-row-force' : 'flex-' + position()\">\r\n @for (item of lista(); track $index) {\r\n @switch (type()) {\r\n @case ('radio') {\r\n <app-radio [name]=\"name()\" [label]=\"item[keyDescri()]\" [disabled]=\"allDisabled()\"\r\n [value]=\"item[keyCodigo()]\" [id]=\"`radio_${item[keyCodigo()]}_${item[keyDescri()]}`\"\r\n [(binding)]=\"value\" />\r\n }\r\n }\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".d-flex[data-force=true]{flex-direction:row!important}@media(max-width:442px){.d-flex[data-force=false]{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))}\n"] }]
|
|
1700
1702
|
}] });
|
|
1701
1703
|
|
|
1702
1704
|
class MultiselectedComponent {
|
|
@@ -1775,12 +1777,12 @@ class MultiselectedComponent {
|
|
|
1775
1777
|
clear() {
|
|
1776
1778
|
this.selection.clear();
|
|
1777
1779
|
}
|
|
1778
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1779
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1780
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiselectedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1781
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MultiselectedComponent, isStandalone: true, selector: "app-multiselected", inputs: { lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewInput: { classPropertyName: "viewInput", publicName: "viewInput", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", 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 }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"multiselect d-flex \">\r\n @if(computedType()){\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\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()\" [(ngModel)]=\"value\" [disabled]=\"allDisabled()\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n </div>\r\n }\r\n\r\n <div class=\"input-container content-2 me-2\">\r\n <input type=\"text\" [value]=\"selectedItems\" class=\"form-control pe-4\" cdkOverlayOrigin readonly\r\n #autocomplete=\"cdkOverlayOrigin\" #inputRef [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()\" (input)=\"null\"\r\n (focus)=\"showDropdown.set(true);\" [disabled]=\"allDisabled()\" />\r\n @if (selectedItems.length > 0) {\r\n <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n ×\r\n </button>\r\n }\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n <ul [style.maxHeight.px]=\"altoContainer()\">\r\n @for (item of lista(); track $index) {\r\n <li>\r\n <label class=\"checkbox-animated\">\r\n <input type=\"checkbox\" [id]=\"item[keyCodigo()]\" [checked]=\"selection.isSelected(item)\" (change)=\"selection.toggle(item)\">\r\n <span class=\"text-dark\">{{item[keyDescri()]}}</span>\r\n </label>\r\n </li>\r\n }\r\n <li>\r\n <label class=\"checkbox-animated\">\r\n <input type=\"checkbox\" [id]=\"-1\" [checked]=\"allSelected\" (change)=\"toogleAllSelection()\">\r\n <span class=\"text-dark\">Todos</span>\r\n </label>\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </div>\r\n </div>\r\n</div>", styles: [".multiselect{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;color:#353535;cursor:pointer;opacity:90%}li:hover{opacity:100%;background:#1010100b}@media(max-width:442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}@media(max-width:443px){.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:8px;background:transparent;border:none;font-size:1.3rem;font-weight:500;line-height:1;cursor:pointer;padding:0}.checkbox-animated{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:Inter,sans-serif;font-size:15px;color:#333}.checkbox-animated input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-height:18px;min-width:18px;border:2px solid #999;border-radius:6px;background-color:#fff;position:relative;outline:none;cursor:pointer;transition:all .25s ease;box-shadow:0 1px 3px #0000001a}.checkbox-animated input[type=checkbox]:hover{border-color:#00cf00;transform:scale(1.05)}.checkbox-animated input[type=checkbox]:active{transform:scale(.9)}.checkbox-animated input[type=checkbox]:after{content:\"\";position:absolute;top:1px;left:5px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.5);transition:all .3s ease}.checkbox-animated input[type=checkbox]:checked{background-color:#04f;border-color:#04f;box-shadow:0 3px 8px #007bff4d;animation:pop .25s ease}.checkbox-animated input[type=checkbox]:checked:after{opacity:1;transform:rotate(45deg) scale(1)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [fadeInOut] });
|
|
1780
1782
|
}
|
|
1781
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1783
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiselectedComponent, decorators: [{
|
|
1782
1784
|
type: Component,
|
|
1783
|
-
args: [{ selector: 'app-multiselected', imports: [OverlayModule, FormsModule], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"multiselect d-flex \">\r\n @if(computedType()){\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\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()\" [(ngModel)]=\"value\" [disabled]=\"allDisabled()\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n </div>\r\n }\r\n\r\n <div class=\"input-container content-2 me-2\">\r\n <input type=\"text\" [value]=\"selectedItems\" class=\"form-control pe-4\" cdkOverlayOrigin readonly\r\n #autocomplete=\"cdkOverlayOrigin\" #inputRef [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()\" (input)=\"null\"\r\n (focus)=\"showDropdown.set(true);\" [disabled]=\"allDisabled()\" />\r\n @if (selectedItems.length > 0) {\r\n <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n ×\r\n </button>\r\n }\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n <ul [style.maxHeight.px]=\"altoContainer()\">\r\n @for (item of lista(); track $index) {\r\n <li>\r\n <label class=\"checkbox-animated\">\r\n <input type=\"checkbox\" [id]=\"item[keyCodigo()]\" [checked]=\"selection.isSelected(item)\" (change)=\"selection.toggle(item)\">\r\n <span class=\"text-dark\">{{item[keyDescri()]}}</span>\r\n </label>\r\n </li>\r\n }\r\n <li>\r\n <label class=\"checkbox-animated\">\r\n <input type=\"checkbox\" [id]=\"-1\" [checked]=\"allSelected\" (change)=\"toogleAllSelection()\">\r\n <span class=\"text-dark\">Todos</span>\r\n </label>\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </div>\r\n </div>\r\n</div>", styles: [".multiselect{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;color:#353535;cursor:pointer;opacity:90%}li:hover{opacity:100%;background:#1010100b}@media
|
|
1785
|
+
args: [{ selector: 'app-multiselected', imports: [OverlayModule, FormsModule], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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-center\">\r\n @if (!isVertical()) {\r\n <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n class=\"fw-bold text-danger\">(*)</span>}</label>\r\n }\r\n <div class=\"multiselect d-flex \">\r\n @if(computedType()){\r\n <div class=\"content-1 me-1\">\r\n <input type=\"text\" class=\"form-control show-input\"\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()\" [(ngModel)]=\"value\" [disabled]=\"allDisabled()\"\r\n id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n </div>\r\n }\r\n\r\n <div class=\"input-container content-2 me-2\">\r\n <input type=\"text\" [value]=\"selectedItems\" class=\"form-control pe-4\" cdkOverlayOrigin readonly\r\n #autocomplete=\"cdkOverlayOrigin\" #inputRef [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()\" (input)=\"null\"\r\n (focus)=\"showDropdown.set(true);\" [disabled]=\"allDisabled()\" />\r\n @if (selectedItems.length > 0) {\r\n <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n ×\r\n </button>\r\n }\r\n <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n <ul [style.maxHeight.px]=\"altoContainer()\">\r\n @for (item of lista(); track $index) {\r\n <li>\r\n <label class=\"checkbox-animated\">\r\n <input type=\"checkbox\" [id]=\"item[keyCodigo()]\" [checked]=\"selection.isSelected(item)\" (change)=\"selection.toggle(item)\">\r\n <span class=\"text-dark\">{{item[keyDescri()]}}</span>\r\n </label>\r\n </li>\r\n }\r\n <li>\r\n <label class=\"checkbox-animated\">\r\n <input type=\"checkbox\" [id]=\"-1\" [checked]=\"allSelected\" (change)=\"toogleAllSelection()\">\r\n <span class=\"text-dark\">Todos</span>\r\n </label>\r\n </li>\r\n </ul>\r\n </ng-template>\r\n </div>\r\n </div>\r\n</div>", styles: [".multiselect{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;color:#353535;cursor:pointer;opacity:90%}li:hover{opacity:100%;background:#1010100b}@media(max-width:442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}@media(max-width:443px){.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:8px;background:transparent;border:none;font-size:1.3rem;font-weight:500;line-height:1;cursor:pointer;padding:0}.checkbox-animated{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:Inter,sans-serif;font-size:15px;color:#333}.checkbox-animated input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-height:18px;min-width:18px;border:2px solid #999;border-radius:6px;background-color:#fff;position:relative;outline:none;cursor:pointer;transition:all .25s ease;box-shadow:0 1px 3px #0000001a}.checkbox-animated input[type=checkbox]:hover{border-color:#00cf00;transform:scale(1.05)}.checkbox-animated input[type=checkbox]:active{transform:scale(.9)}.checkbox-animated input[type=checkbox]:after{content:\"\";position:absolute;top:1px;left:5px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.5);transition:all .3s ease}.checkbox-animated input[type=checkbox]:checked{background-color:#04f;border-color:#04f;box-shadow:0 3px 8px #007bff4d;animation:pop .25s ease}.checkbox-animated input[type=checkbox]:checked:after{opacity:1;transform:rotate(45deg) scale(1)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}\n"] }]
|
|
1784
1786
|
}], ctorParameters: () => [] });
|
|
1785
1787
|
|
|
1786
1788
|
class SwitchComponent {
|
|
@@ -1812,10 +1814,10 @@ class SwitchComponent {
|
|
|
1812
1814
|
currentIcon() {
|
|
1813
1815
|
return this._checked ? this.iconOn() : this.iconOff();
|
|
1814
1816
|
}
|
|
1815
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1816
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
1817
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1818
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: SwitchComponent, isStandalone: true, selector: "app-switch", 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 }, 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=\"switchControl\">\r\n\r\n <span class=\"switch-circle\">\r\n <i [class]=\"currentIcon()\"></i>\r\n </span>\r\n\r\n <label class=\"label-toggle ms-2\" for=\"switchControl\">\r\n {{ currentLabel() }}\r\n </label>\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 #a0a0a0;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:1px solid #a0a0a0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#000;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:#000;border-color:#000;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1817
1819
|
}
|
|
1818
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1820
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
1819
1821
|
type: Component,
|
|
1820
1822
|
args: [{ selector: 'app-switch', 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=\"switchControl\">\r\n\r\n <span class=\"switch-circle\">\r\n <i [class]=\"currentIcon()\"></i>\r\n </span>\r\n\r\n <label class=\"label-toggle ms-2\" for=\"switchControl\">\r\n {{ currentLabel() }}\r\n </label>\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 #a0a0a0;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:1px solid #a0a0a0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#000;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:#000;border-color:#000;color:#fff}\n"] }]
|
|
1821
1823
|
}], ctorParameters: () => [] });
|
|
@@ -1839,12 +1841,12 @@ class ListOptionComponent {
|
|
|
1839
1841
|
customBorderColor = input('');
|
|
1840
1842
|
customBoxShadow = input('');
|
|
1841
1843
|
customTransition = input('');
|
|
1842
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1843
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1844
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ListOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1845
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ListOptionComponent, isStandalone: true, selector: "app-list-option", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", 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 }, name: { classPropertyName: "name", publicName: "name", 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 }, position_row: { classPropertyName: "position_row", publicName: "position_row", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", 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 } }, outputs: { value: "valueChange", disabled: "disabledChange", allDisabled: "allDisabledChange" }, ngImport: i0, template: "\r\n@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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 for=\"{{'id_' + label()}}\" [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 class=\"d-flex flex-{{position()}}\">\r\n @for (item of lista(); track $index) {\r\n @switch (type()) {\r\n @case ('check') {\r\n <app-check-box [name]=\"name()\" [label]=\"item[keyDescri()]\" [value]=\"item[keyCodigo()]\" [id]=\"`check_box_${item[keyCodigo()]}_${item[keyDescri()]}`\" [(binding)]=\"value\" />\r\n }@case ('radio') {\r\n <app-radio [name]=\"name()\" [label]=\"item[keyDescri()]\" [disabled]=\"allDisabled()\" [value]=\"item[keyCodigo()]\" [id]=\"`radio_${item[keyCodigo()]}_${item[keyDescri()]}`\" [(binding)]=\"value\" />\r\n }\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@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))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding", "class", "checked"], outputs: ["bindingChange", "changeCheck"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["name", "id", "label", "value", "binding", "checked", "disabled"], outputs: ["bindingChange", "changed"] }], animations: [fadeInOut] });
|
|
1844
1846
|
}
|
|
1845
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ListOptionComponent, decorators: [{
|
|
1846
1848
|
type: Component,
|
|
1847
|
-
args: [{ selector: 'app-list-option', imports: [FormsModule, CommonModule, CheckBoxComponent, RadioComponent], animations: [fadeInOut], template: "\r\n@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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 for=\"{{'id_' + label()}}\" [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 class=\"d-flex flex-{{position()}}\">\r\n @for (item of lista(); track $index) {\r\n @switch (type()) {\r\n @case ('check') {\r\n <app-check-box [name]=\"name()\" [label]=\"item[keyDescri()]\" [value]=\"item[keyCodigo()]\" [id]=\"`check_box_${item[keyCodigo()]}_${item[keyDescri()]}`\" [(binding)]=\"value\" />\r\n }@case ('radio') {\r\n <app-radio [name]=\"name()\" [label]=\"item[keyDescri()]\" [disabled]=\"allDisabled()\" [value]=\"item[keyCodigo()]\" [id]=\"`radio_${item[keyCodigo()]}_${item[keyDescri()]}`\" [(binding)]=\"value\" />\r\n }\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@media
|
|
1849
|
+
args: [{ selector: 'app-list-option', imports: [FormsModule, CommonModule, CheckBoxComponent, RadioComponent], animations: [fadeInOut], template: "\r\n@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [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 for=\"{{'id_' + label()}}\" [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 class=\"d-flex flex-{{position()}}\">\r\n @for (item of lista(); track $index) {\r\n @switch (type()) {\r\n @case ('check') {\r\n <app-check-box [name]=\"name()\" [label]=\"item[keyDescri()]\" [value]=\"item[keyCodigo()]\" [id]=\"`check_box_${item[keyCodigo()]}_${item[keyDescri()]}`\" [(binding)]=\"value\" />\r\n }@case ('radio') {\r\n <app-radio [name]=\"name()\" [label]=\"item[keyDescri()]\" [disabled]=\"allDisabled()\" [value]=\"item[keyCodigo()]\" [id]=\"`radio_${item[keyCodigo()]}_${item[keyDescri()]}`\" [(binding)]=\"value\" />\r\n }\r\n }\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@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))}\n"] }]
|
|
1848
1850
|
}] });
|
|
1849
1851
|
|
|
1850
1852
|
class ListSituacionesComponent {
|
|
@@ -1916,10 +1918,10 @@ class ListSituacionesComponent {
|
|
|
1916
1918
|
const extraer = this.allData().filter(da => da.selected && da.id != 'todos').map(data => data.id);
|
|
1917
1919
|
this.dataselected.set(extraer ? extraer.join(',') : '');
|
|
1918
1920
|
}
|
|
1919
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1920
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1921
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ListSituacionesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1922
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ListSituacionesComponent, isStandalone: true, selector: "app-list-situaciones", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, alert: { classPropertyName: "alert", publicName: "alert", isSignal: true, isRequired: false, transformFunction: null }, keyid: { classPropertyName: "keyid", publicName: "keyid", isSignal: true, isRequired: false, transformFunction: null }, keydesc: { classPropertyName: "keydesc", publicName: "keydesc", isSignal: true, isRequired: false, transformFunction: null }, indexSelected: { classPropertyName: "indexSelected", publicName: "indexSelected", isSignal: true, isRequired: false, transformFunction: null }, dataselected: { classPropertyName: "dataselected", publicName: "dataselected", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, positionRow: { classPropertyName: "positionRow", publicName: "positionRow", isSignal: true, isRequired: false, transformFunction: null }, wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, classRow: { classPropertyName: "classRow", publicName: "classRow", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataselected: "dataselectedChange" }, ngImport: i0, template: "<div class=\"row mt-2\">\r\n @if (isVertical()) {\r\n <label class=\"d-block mb-1\" [style.min-width]=\"wlabel() + 'px'\">{{label()}}</label>\r\n }\r\n <div class=\"col-12\">\r\n <div [ngClass]=\"!isVertical() ? 'd-flex flex-{{positionRow()}}' : 'd-flex'\">\r\n @if (!isVertical()) {\r\n <label class=\"d-block mb-1\" [style.min-width]=\"wlabel() + 'px'\">{{label()}}</label>\r\n }\r\n <div class=\"row\">\r\n @if (positionRow() == 'row') {\r\n @for (si of allData(); track $index) {\r\n <div class=\"{{classRow()}}\">\r\n <app-check-box [name]=\"'situacion-' + $index\" [id]=\"'situacion-' + $index\" [label]=\"si.nombre\" [value]=\"si.id\"\r\n [(binding)]=\"si.selected\" (bindingChange)=\"onCheckboxChange($event, $index)\" />\r\n </div>\r\n }\r\n }@else {\r\n @for (si of allData(); track $index) {\r\n <app-check-box [name]=\"'situacion-' + $index\" [id]=\"'situacion-' + $index\" [label]=\"si.nombre\" [value]=\"si.id\"\r\n [(binding)]=\"si.selected\" (bindingChange)=\"onCheckboxChange($event, $index)\" />\r\n }\r\n }\r\n \r\n </div>\r\n \r\n </div> \r\n </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding", "class", "checked"], outputs: ["bindingChange", "changeCheck"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1921
1923
|
}
|
|
1922
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
1924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ListSituacionesComponent, decorators: [{
|
|
1923
1925
|
type: Component,
|
|
1924
1926
|
args: [{ selector: 'app-list-situaciones', imports: [FormsModule, CheckBoxComponent, NgClass], template: "<div class=\"row mt-2\">\r\n @if (isVertical()) {\r\n <label class=\"d-block mb-1\" [style.min-width]=\"wlabel() + 'px'\">{{label()}}</label>\r\n }\r\n <div class=\"col-12\">\r\n <div [ngClass]=\"!isVertical() ? 'd-flex flex-{{positionRow()}}' : 'd-flex'\">\r\n @if (!isVertical()) {\r\n <label class=\"d-block mb-1\" [style.min-width]=\"wlabel() + 'px'\">{{label()}}</label>\r\n }\r\n <div class=\"row\">\r\n @if (positionRow() == 'row') {\r\n @for (si of allData(); track $index) {\r\n <div class=\"{{classRow()}}\">\r\n <app-check-box [name]=\"'situacion-' + $index\" [id]=\"'situacion-' + $index\" [label]=\"si.nombre\" [value]=\"si.id\"\r\n [(binding)]=\"si.selected\" (bindingChange)=\"onCheckboxChange($event, $index)\" />\r\n </div>\r\n }\r\n }@else {\r\n @for (si of allData(); track $index) {\r\n <app-check-box [name]=\"'situacion-' + $index\" [id]=\"'situacion-' + $index\" [label]=\"si.nombre\" [value]=\"si.id\"\r\n [(binding)]=\"si.selected\" (bindingChange)=\"onCheckboxChange($event, $index)\" />\r\n }\r\n }\r\n \r\n </div>\r\n \r\n </div> \r\n </div>\r\n</div>" }]
|
|
1925
1927
|
}], ctorParameters: () => [] });
|
|
@@ -1994,12 +1996,12 @@ class MultiSelectDropdownComponent {
|
|
|
1994
1996
|
const todasLasIds = this.opciones().map(op => this.obtenerValorKey(op));
|
|
1995
1997
|
return todasLasIds.every(id => this.selecciones().includes(id));
|
|
1996
1998
|
}
|
|
1997
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
1998
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
1999
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2000
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MultiSelectDropdownComponent, isStandalone: true, selector: "app-multi-select-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, opciones: { classPropertyName: "opciones", publicName: "opciones", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, descri: { classPropertyName: "descri", publicName: "descri", isSignal: true, isRequired: false, transformFunction: null }, seleccion: { classPropertyName: "seleccion", publicName: "seleccion", isSignal: true, isRequired: false, transformFunction: null }, viewInput: { classPropertyName: "viewInput", publicName: "viewInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { seleccion: "seleccionChange" }, ngImport: i0, template: "<div class=\"multi-select-wrapper d-flex\">\r\n @if (!isVertical()) {\r\n <label [style.min-width]=\"wlabel() + 'px'\" class=\"form-label mb-0\">\r\n {{ label() }}\r\n @if (isRequired()) {\r\n <span class=\"fw-bold text-danger\">(*)</span>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"w-100 me-2\">\r\n <div class=\"dropdown w-100\" ngbDropdown [autoClose]=\"'outside'\">\r\n <button class=\"dropdown-toggle form-static w-100 text-start text-limit\" type=\"button\" ngbDropdownToggle>\r\n {{ textoBoton() }}\r\n </button>\r\n\r\n <div class=\"dropdown-menu b-0 p-0 dropdown-height w-100\" ngbDropdownMenu>\r\n @for (opcion of opciones(); track $index) {\r\n <div class=\"dropdown-item p-0 border-top-radius border-bottom-radius\">\r\n <label class=\"d-block m-0 px-2 pt-1\" [for]=\"'opcion-' + obtenerValorKey(opcion)\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [id]=\"'opcion-' + obtenerValorKey(opcion)\"\r\n [checked]=\"estaSeleccionado(opcion)\" (change)=\"toggleSeleccion(opcion)\">\r\n <span class=\"form-check-label\">\r\n {{ obtenerValorDescri(opcion) }}\r\n </span>\r\n </div>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div class=\"dropdown-item p-0 border-top-radius border-bottom-radius\">\r\n <label class=\"d-block m-0 px-2 pt-1\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"opcion-todos\"\r\n [checked]=\"estaSeleccionadoTodos()\" (change)=\"toggleTodos()\">\r\n <span class=\"form-check-label\">\r\n Todos\r\n </span>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".multi-select-wrapper{display:flex;align-items:center}@media(max-width:442px){.multi-select-wrapper{flex-direction:column;align-items:flex-start}.multi-select-wrapper label{min-width:auto!important;margin-bottom:4px;width:100%;text-align:left}.multi-select-wrapper .flex-grow-1{width:100%}}.dropdown-height{max-height:300px;overflow-y:auto}.text-limit{overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }] });
|
|
1999
2001
|
}
|
|
2000
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2002
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiSelectDropdownComponent, decorators: [{
|
|
2001
2003
|
type: Component,
|
|
2002
|
-
args: [{ selector: 'app-multi-select-dropdown', imports: [CommonModule, FormsModule, NgbDropdownModule], template: "<div class=\"multi-select-wrapper d-flex\">\r\n @if (!isVertical()) {\r\n <label [style.min-width]=\"wlabel() + 'px'\" class=\"form-label mb-0\">\r\n {{ label() }}\r\n @if (isRequired()) {\r\n <span class=\"fw-bold text-danger\">(*)</span>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"w-100 me-2\">\r\n <div class=\"dropdown w-100\" ngbDropdown [autoClose]=\"'outside'\">\r\n <button class=\"dropdown-toggle form-static w-100 text-start text-limit\" type=\"button\" ngbDropdownToggle>\r\n {{ textoBoton() }}\r\n </button>\r\n\r\n <div class=\"dropdown-menu b-0 p-0 dropdown-height w-100\" ngbDropdownMenu>\r\n @for (opcion of opciones(); track $index) {\r\n <div class=\"dropdown-item p-0 border-top-radius border-bottom-radius\">\r\n <label class=\"d-block m-0 px-2 pt-1\" [for]=\"'opcion-' + obtenerValorKey(opcion)\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [id]=\"'opcion-' + obtenerValorKey(opcion)\"\r\n [checked]=\"estaSeleccionado(opcion)\" (change)=\"toggleSeleccion(opcion)\">\r\n <span class=\"form-check-label\">\r\n {{ obtenerValorDescri(opcion) }}\r\n </span>\r\n </div>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div class=\"dropdown-item p-0 border-top-radius border-bottom-radius\">\r\n <label class=\"d-block m-0 px-2 pt-1\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"opcion-todos\"\r\n [checked]=\"estaSeleccionadoTodos()\" (change)=\"toggleTodos()\">\r\n <span class=\"form-check-label\">\r\n Todos\r\n </span>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".multi-select-wrapper{display:flex;align-items:center}@media
|
|
2004
|
+
args: [{ selector: 'app-multi-select-dropdown', imports: [CommonModule, FormsModule, NgbDropdownModule], template: "<div class=\"multi-select-wrapper d-flex\">\r\n @if (!isVertical()) {\r\n <label [style.min-width]=\"wlabel() + 'px'\" class=\"form-label mb-0\">\r\n {{ label() }}\r\n @if (isRequired()) {\r\n <span class=\"fw-bold text-danger\">(*)</span>\r\n }\r\n </label>\r\n }\r\n\r\n <div class=\"w-100 me-2\">\r\n <div class=\"dropdown w-100\" ngbDropdown [autoClose]=\"'outside'\">\r\n <button class=\"dropdown-toggle form-static w-100 text-start text-limit\" type=\"button\" ngbDropdownToggle>\r\n {{ textoBoton() }}\r\n </button>\r\n\r\n <div class=\"dropdown-menu b-0 p-0 dropdown-height w-100\" ngbDropdownMenu>\r\n @for (opcion of opciones(); track $index) {\r\n <div class=\"dropdown-item p-0 border-top-radius border-bottom-radius\">\r\n <label class=\"d-block m-0 px-2 pt-1\" [for]=\"'opcion-' + obtenerValorKey(opcion)\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [id]=\"'opcion-' + obtenerValorKey(opcion)\"\r\n [checked]=\"estaSeleccionado(opcion)\" (change)=\"toggleSeleccion(opcion)\">\r\n <span class=\"form-check-label\">\r\n {{ obtenerValorDescri(opcion) }}\r\n </span>\r\n </div>\r\n </label>\r\n </div>\r\n }\r\n\r\n <div class=\"dropdown-item p-0 border-top-radius border-bottom-radius\">\r\n <label class=\"d-block m-0 px-2 pt-1\">\r\n <div class=\"form-check\">\r\n <input class=\"form-check-input\" type=\"checkbox\" id=\"opcion-todos\"\r\n [checked]=\"estaSeleccionadoTodos()\" (change)=\"toggleTodos()\">\r\n <span class=\"form-check-label\">\r\n Todos\r\n </span>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".multi-select-wrapper{display:flex;align-items:center}@media(max-width:442px){.multi-select-wrapper{flex-direction:column;align-items:flex-start}.multi-select-wrapper label{min-width:auto!important;margin-bottom:4px;width:100%;text-align:left}.multi-select-wrapper .flex-grow-1{width:100%}}.dropdown-height{max-height:300px;overflow-y:auto}.text-limit{overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
2003
2005
|
}] });
|
|
2004
2006
|
|
|
2005
2007
|
class SidebarComponent {
|
|
@@ -2038,23 +2040,23 @@ class SidebarComponent {
|
|
|
2038
2040
|
window.open(ruta, '_blank');
|
|
2039
2041
|
}
|
|
2040
2042
|
}
|
|
2041
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2042
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2043
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2044
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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"] }] });
|
|
2043
2045
|
}
|
|
2044
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2046
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
2045
2047
|
type: Component,
|
|
2046
|
-
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
|
|
2048
|
+
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"] }]
|
|
2047
2049
|
}], ctorParameters: () => [] });
|
|
2048
2050
|
|
|
2049
2051
|
class DetalleCreditoComponent {
|
|
2050
2052
|
data = input({});
|
|
2051
2053
|
utilizado = output();
|
|
2052
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2053
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.
|
|
2054
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DetalleCreditoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2055
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: DetalleCreditoComponent, isStandalone: true, selector: "app-detalle-credito", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { utilizado: "utilizado" }, ngImport: i0, template: "@let simbolo = data().simbolo || 'S/.';\r\n\r\n<div class=\"d-flex item-credito mt-2\">\r\n <div class=\"title-credito text-dark\">Cr\u00E9dito:</div>\r\n <div class=\"subtitle fw-bold\" [ngClass]=\"data().credito ? 'text-success' : 'text-danger'\">{{data().credito ? 'Abierto' : 'Cerrado'}}</div>\r\n</div>\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">L\u00EDnea:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{data().limitecredito ?? 0 | number:'1.2-2'}}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Utilizado:</div>\r\n <div class=\"subtitle\" (click)=\"data().saldo ? utilizado.emit() : null\" [ngClass]=\"data().saldo ? 'cursor-pointer underline' : ''\">{{simbolo}} {{ data().saldo ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Por vencer:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{ data().pendiente ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Vencido:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{ data().vencido ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Disponible:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{ data().disponible ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Puntos:</div>\r\n <div class=\"subtitle\">{{ data().puntaje ?? 0 }}</div>\r\n</div>\r\n", styles: [".title-credito{min-width:130px;width:130px;font-size:18px;font-weight:600}.subtitle{font-size:18px;font-weight:600}.underline{transition:all .3s ease-in-out}.underline:hover{text-decoration:underline;transform:scale(1.05);color:#818181}@media(max-width:380px){.item-credito{padding-left:5px;padding-right:5px;flex-wrap:wrap}.title-credito{font-size:16px!important}.subtitle{font-size:15px!important;font-weight:600!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
|
|
2054
2056
|
}
|
|
2055
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2057
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DetalleCreditoComponent, decorators: [{
|
|
2056
2058
|
type: Component,
|
|
2057
|
-
args: [{ selector: 'app-detalle-credito', imports: [NgClass, DecimalPipe], template: "@let simbolo = data().simbolo || 'S/.';\r\n\r\n<div class=\"d-flex item-credito mt-2\">\r\n <div class=\"title-credito text-dark\">Cr\u00E9dito:</div>\r\n <div class=\"subtitle fw-bold\" [ngClass]=\"data().credito ? 'text-success' : 'text-danger'\">{{data().credito ? 'Abierto' : 'Cerrado'}}</div>\r\n</div>\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">L\u00EDnea:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{data().limitecredito ?? 0 | number:'1.2-2'}}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Utilizado:</div>\r\n <div class=\"subtitle\" (click)=\"data().saldo ? utilizado.emit() : null\" [ngClass]=\"data().saldo ? 'cursor-pointer underline' : ''\">{{simbolo}} {{ data().saldo ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Por vencer:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{ data().pendiente ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Vencido:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{ data().vencido ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Disponible:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{ data().disponible ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Puntos:</div>\r\n <div class=\"subtitle\">{{ data().puntaje ?? 0 }}</div>\r\n</div>\r\n", styles: [".title-credito{min-width:130px;width:130px;font-size:18px;font-weight:600}.subtitle{font-size:18px;font-weight:600}.underline{transition:all .3s ease-in-out}.underline:hover{text-decoration:underline;transform:scale(1.05);color:#818181}@media
|
|
2059
|
+
args: [{ selector: 'app-detalle-credito', imports: [NgClass, DecimalPipe], template: "@let simbolo = data().simbolo || 'S/.';\r\n\r\n<div class=\"d-flex item-credito mt-2\">\r\n <div class=\"title-credito text-dark\">Cr\u00E9dito:</div>\r\n <div class=\"subtitle fw-bold\" [ngClass]=\"data().credito ? 'text-success' : 'text-danger'\">{{data().credito ? 'Abierto' : 'Cerrado'}}</div>\r\n</div>\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">L\u00EDnea:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{data().limitecredito ?? 0 | number:'1.2-2'}}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Utilizado:</div>\r\n <div class=\"subtitle\" (click)=\"data().saldo ? utilizado.emit() : null\" [ngClass]=\"data().saldo ? 'cursor-pointer underline' : ''\">{{simbolo}} {{ data().saldo ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Por vencer:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{ data().pendiente ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Vencido:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{ data().vencido ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Disponible:</div>\r\n <div class=\"subtitle\">{{simbolo}} {{ data().disponible ?? 0 | number:'1.2-2' }}</div>\r\n</div>\r\n\r\n<div class=\"d-flex item-credito\">\r\n <div class=\"title-credito\">Puntos:</div>\r\n <div class=\"subtitle\">{{ data().puntaje ?? 0 }}</div>\r\n</div>\r\n", styles: [".title-credito{min-width:130px;width:130px;font-size:18px;font-weight:600}.subtitle{font-size:18px;font-weight:600}.underline{transition:all .3s ease-in-out}.underline:hover{text-decoration:underline;transform:scale(1.05);color:#818181}@media(max-width:380px){.item-credito{padding-left:5px;padding-right:5px;flex-wrap:wrap}.title-credito{font-size:16px!important}.subtitle{font-size:15px!important;font-weight:600!important}}\n"] }]
|
|
2058
2060
|
}] });
|
|
2059
2061
|
|
|
2060
2062
|
class MontosCalcularComponent {
|
|
@@ -2063,19 +2065,19 @@ class MontosCalcularComponent {
|
|
|
2063
2065
|
simbolo = model('S/.');
|
|
2064
2066
|
cleanNumber = cleanNumber;
|
|
2065
2067
|
withSimbolo = input(true);
|
|
2066
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2067
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2068
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MontosCalcularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2069
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MontosCalcularComponent, isStandalone: true, selector: "app-montos-calcular", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, sizeFont: { classPropertyName: "sizeFont", publicName: "sizeFont", isSignal: true, isRequired: false, transformFunction: null }, simbolo: { classPropertyName: "simbolo", publicName: "simbolo", isSignal: true, isRequired: false, transformFunction: null }, withSimbolo: { classPropertyName: "withSimbolo", publicName: "withSimbolo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { simbolo: "simboloChange" }, ngImport: i0, template: "<div class=\"container mt-2\">\r\n <div class=\"table-responsive-custom\">\r\n <table class=\"table total-table bg-dark\">\r\n <tbody>\r\n @for (item of data(); track $index) {\r\n <tr [style.font-size.px]=\"sizeFont() ?? null\">\r\n <td>{{item.title}}</td>\r\n @if (withSimbolo()) {\r\n <td>{{item.simbolo ?? simbolo()}}</td>\r\n }\r\n <td>{{cleanNumber(item.value) | number:'1.2-2'}}</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n</div>", styles: [".table-responsive-custom{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.total-table{font-size:14px;min-width:280px;width:100%}.total-table tbody tr td{padding:0 10px;border:none;font-weight:600;text-align:right;white-space:nowrap}@media(max-width:380px){.container{padding:5px 0;margin:0}.total-table tbody tr td{padding:0 5px;text-align:left}.table-responsive-custom{-webkit-overflow-scrolling:touch;overflow-x:auto;display:block}}\n"], dependencies: [{ kind: "pipe", type: DecimalPipe, name: "number" }] });
|
|
2068
2070
|
}
|
|
2069
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2071
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MontosCalcularComponent, decorators: [{
|
|
2070
2072
|
type: Component,
|
|
2071
|
-
args: [{ selector: 'app-montos-calcular', imports: [DecimalPipe], template: "<div class=\"container mt-2\">\r\n <div class=\"table-responsive-custom\">\r\n <table class=\"table total-table bg-dark\">\r\n <tbody>\r\n @for (item of data(); track $index) {\r\n <tr [style.font-size.px]=\"sizeFont() ?? null\">\r\n <td>{{item.title}}</td>\r\n @if (withSimbolo()) {\r\n <td>{{item.simbolo ?? simbolo()}}</td>\r\n }\r\n <td>{{cleanNumber(item.value) | number:'1.2-2'}}</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n</div>", styles: [".table-responsive-custom{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.total-table{font-size:14px;min-width:280px;width:100%}.total-table tbody tr td{padding:0 10px;border:none;font-weight:600;text-align:right;white-space:nowrap}@media
|
|
2073
|
+
args: [{ selector: 'app-montos-calcular', imports: [DecimalPipe], template: "<div class=\"container mt-2\">\r\n <div class=\"table-responsive-custom\">\r\n <table class=\"table total-table bg-dark\">\r\n <tbody>\r\n @for (item of data(); track $index) {\r\n <tr [style.font-size.px]=\"sizeFont() ?? null\">\r\n <td>{{item.title}}</td>\r\n @if (withSimbolo()) {\r\n <td>{{item.simbolo ?? simbolo()}}</td>\r\n }\r\n <td>{{cleanNumber(item.value) | number:'1.2-2'}}</td>\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n</div>", styles: [".table-responsive-custom{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.total-table{font-size:14px;min-width:280px;width:100%}.total-table tbody tr td{padding:0 10px;border:none;font-weight:600;text-align:right;white-space:nowrap}@media(max-width:380px){.container{padding:5px 0;margin:0}.total-table tbody tr td{padding:0 5px;text-align:left}.table-responsive-custom{-webkit-overflow-scrolling:touch;overflow-x:auto;display:block}}\n"] }]
|
|
2072
2074
|
}] });
|
|
2073
2075
|
|
|
2074
2076
|
class SpinnerComponent {
|
|
2075
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2076
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
2077
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2078
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: SpinnerComponent, isStandalone: true, selector: "app-spinner", ngImport: i0, template: "<div id=\"custom-spinner\" class=\"spinner-overlay\" hidden>\r\n <div class=\"spinner-container\">\r\n <div class=\"spinner-border-wrapper\">\r\n <div class=\"spinner-border\"></div>\r\n </div>\r\n <img src=\"../assets/images/logo-tsi-tres.png\" class=\"spinner-img\" />\r\n </div>\r\n</div>", styles: [".spinner-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:9999;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:auto}.spinner-overlay:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.spinner-container{position:relative;width:300px;height:300px;display:flex;justify-content:center;align-items:center;animation:heartbeat 1.5s infinite ease-in-out;-webkit-user-select:none;user-select:none}.spinner-border-wrapper{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation:heartbeat 1.5s infinite ease-in-out}.spinner-border{position:absolute;width:100%;height:100%;border-radius:50%;border:10px dotted white;animation:spin 5s linear infinite;mask-image:conic-gradient(#fff 0% 70%,#fff0);-webkit-mask-image:conic-gradient(rgb(255,255,255) 0%,rgb(255,255,255) 70%,rgba(255,255,255,0) 100%);pointer-events:none}.spinner-img{opacity:.85;width:200px;height:auto;position:relative;z-index:1;animation:heartbeat 1.5s infinite ease-in-out;-webkit-user-select:none;user-select:none;pointer-events:none;-webkit-user-drag:none}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
|
|
2077
2079
|
}
|
|
2078
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2080
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
2079
2081
|
type: Component,
|
|
2080
2082
|
args: [{ selector: 'app-spinner', imports: [], template: "<div id=\"custom-spinner\" class=\"spinner-overlay\" hidden>\r\n <div class=\"spinner-container\">\r\n <div class=\"spinner-border-wrapper\">\r\n <div class=\"spinner-border\"></div>\r\n </div>\r\n <img src=\"../assets/images/logo-tsi-tres.png\" class=\"spinner-img\" />\r\n </div>\r\n</div>", styles: [".spinner-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000d9;display:flex;justify-content:center;align-items:center;z-index:9999;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:auto}.spinner-overlay:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.spinner-container{position:relative;width:300px;height:300px;display:flex;justify-content:center;align-items:center;animation:heartbeat 1.5s infinite ease-in-out;-webkit-user-select:none;user-select:none}.spinner-border-wrapper{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation:heartbeat 1.5s infinite ease-in-out}.spinner-border{position:absolute;width:100%;height:100%;border-radius:50%;border:10px dotted white;animation:spin 5s linear infinite;mask-image:conic-gradient(#fff 0% 70%,#fff0);-webkit-mask-image:conic-gradient(rgb(255,255,255) 0%,rgb(255,255,255) 70%,rgba(255,255,255,0) 100%);pointer-events:none}.spinner-img{opacity:.85;width:200px;height:auto;position:relative;z-index:1;animation:heartbeat 1.5s infinite ease-in-out;-webkit-user-select:none;user-select:none;pointer-events:none;-webkit-user-drag:none}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
2081
2083
|
}] });
|
|
@@ -2094,10 +2096,10 @@ class IconsDirective {
|
|
|
2094
2096
|
this.renderer.addClass(this.elementRef.nativeElement, iconClass);
|
|
2095
2097
|
}
|
|
2096
2098
|
}
|
|
2097
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2098
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
2099
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IconsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2100
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: IconsDirective, isStandalone: true, selector: "[iconName]", inputs: { name: { classPropertyName: "name", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
2099
2101
|
}
|
|
2100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IconsDirective, decorators: [{
|
|
2101
2103
|
type: Directive,
|
|
2102
2104
|
args: [{
|
|
2103
2105
|
selector: '[iconName]',
|
|
@@ -2130,10 +2132,10 @@ class ButtonsModalDirective {
|
|
|
2130
2132
|
}
|
|
2131
2133
|
}
|
|
2132
2134
|
}
|
|
2133
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2134
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
2135
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonsModalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2136
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: ButtonsModalDirective, isStandalone: true, selector: "[colorBtn]", inputs: { color: { classPropertyName: "color", publicName: "colorBtn", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
2135
2137
|
}
|
|
2136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonsModalDirective, decorators: [{
|
|
2137
2139
|
type: Directive,
|
|
2138
2140
|
args: [{
|
|
2139
2141
|
selector: '[colorBtn]',
|
|
@@ -2156,10 +2158,10 @@ class ButtonsOutlineDirective {
|
|
|
2156
2158
|
this.renderer.addClass(this.el.nativeElement, colorClass);
|
|
2157
2159
|
}
|
|
2158
2160
|
}
|
|
2159
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2160
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
2161
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonsOutlineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2162
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: ButtonsOutlineDirective, isStandalone: true, selector: "[colorOutlineBtn]", inputs: { color: { classPropertyName: "color", publicName: "colorOutlineBtn", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
2161
2163
|
}
|
|
2162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ButtonsOutlineDirective, decorators: [{
|
|
2163
2165
|
type: Directive,
|
|
2164
2166
|
args: [{
|
|
2165
2167
|
selector: '[colorOutlineBtn]',
|
|
@@ -2285,12 +2287,12 @@ class DropdownMenuComponent {
|
|
|
2285
2287
|
}
|
|
2286
2288
|
return null;
|
|
2287
2289
|
}
|
|
2288
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2289
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2290
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2291
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: DropdownMenuComponent, isStandalone: true, selector: "app-dropdown-menu", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, buttonProperties: { classPropertyName: "buttonProperties", publicName: "buttonProperties", isSignal: true, isRequired: false, transformFunction: null }, hoverTrigger: { classPropertyName: "hoverTrigger", publicName: "hoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, inputButton: { classPropertyName: "inputButton", publicName: "inputButton", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: NgbDropdown, descendants: true }, { propertyName: "submenuAnchors", predicate: ["submenuAnchor"], descendants: true }, { propertyName: "submenuDivs", predicate: ["submenuDiv"], descendants: true }], ngImport: i0, template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n @if (buttonProps()) {\r\n <button [colorBtn]=\"buttonProps()?.color || null\"\r\n [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"\r\n class=\"button-tilt-hover w-auto w-sm-100\" [ngClass]=\"{\r\n 'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n 'pbp-6 wrap': !inputButton()\r\n }\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\" (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n @if (buttonProps()?.icon == 'sunat') {\r\n <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n }@else {\r\n <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i>\r\n } {{ buttonProps()?.texto }}\r\n </button>\r\n } @else {\r\n <button class=\"btn btn-sm border-0\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n (mouseleave)=\"handleMainButtonMouseLeave()\" [disabled]=\"disabled()\">\r\n <i class=\"fas fa-align-left fs-6\"></i>\r\n </button>\r\n }\r\n\r\n <div ngbDropdownMenu class=\"my-0 py-0\" (mouseenter)=\"!isMobile() && handleDropdownMouseEnter()\"\r\n (mouseleave)=\"!isMobile() && handleDropdownMouseLeave()\">\r\n @for (option of visibleOptions(); track $index) {\r\n @if (isMobile() && option.submenu) {\r\n @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\" [uploadButton]=\"sub.upload\"\r\n [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n [tooltip]=\"getPropertyName(sub.property)\" [extraClass]=\"\r\n (isFirstMobileItem(sub) ? 'border-top-radius ' : '') +\r\n (isLastMobileItem(sub) ? 'border-bottom-radius' : '')\r\n \" [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n }\r\n }\r\n @else if (!option.submenu || (option.submenu && !isMobile())) {\r\n <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n (mouseenter)=\"!isMobile() && submenuAnchor.open()\">\r\n @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n (mouseleave)=\"!isMobile() && mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n @if (option.submenu && !isMobile()) {\r\n <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n (mouseleave)=\"!isMobile() && mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n [tooltip]=\"getPropertyName(sub.property)\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n }\r\n </div>\r\n }\r\n </app-button>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media(max-width:575px){.d-inline-block{display:block!important}}button.radius-none,.btn.radius-none{border-radius:0!important}.padd{padding:3px 8px!important}\n"], dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], outputs: ["accion", "fileSelected"] }, { kind: "directive", type: IconsDirective, selector: "[iconName]", inputs: ["iconName"] }, { kind: "directive", type: ButtonsModalDirective, selector: "[colorBtn]", inputs: ["colorBtn"] }, { kind: "directive", type: ButtonsOutlineDirective, selector: "[colorOutlineBtn]", inputs: ["colorOutlineBtn"] }] });
|
|
2290
2292
|
}
|
|
2291
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2293
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
2292
2294
|
type: Component,
|
|
2293
|
-
args: [{ selector: 'app-dropdown-menu', imports: [NgbDropdownModule, CommonModule, ButtonComponent, IconsDirective, ButtonsModalDirective, ButtonsOutlineDirective], template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n @if (buttonProps()) {\r\n <button [colorBtn]=\"buttonProps()?.color || null\"\r\n [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"\r\n class=\"button-tilt-hover w-auto w-sm-100\" [ngClass]=\"{\r\n 'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n 'pbp-6 wrap': !inputButton()\r\n }\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\" (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n @if (buttonProps()?.icon == 'sunat') {\r\n <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n }@else {\r\n <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i>\r\n } {{ buttonProps()?.texto }}\r\n </button>\r\n } @else {\r\n <button class=\"btn btn-sm border-0\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n (mouseleave)=\"handleMainButtonMouseLeave()\" [disabled]=\"disabled()\">\r\n <i class=\"fas fa-align-left fs-6\"></i>\r\n </button>\r\n }\r\n\r\n <div ngbDropdownMenu class=\"my-0 py-0\" (mouseenter)=\"!isMobile() && handleDropdownMouseEnter()\"\r\n (mouseleave)=\"!isMobile() && handleDropdownMouseLeave()\">\r\n @for (option of visibleOptions(); track $index) {\r\n @if (isMobile() && option.submenu) {\r\n @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\" [uploadButton]=\"sub.upload\"\r\n [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n [tooltip]=\"getPropertyName(sub.property)\" [extraClass]=\"\r\n (isFirstMobileItem(sub) ? 'border-top-radius ' : '') +\r\n (isLastMobileItem(sub) ? 'border-bottom-radius' : '')\r\n \" [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n }\r\n }\r\n @else if (!option.submenu || (option.submenu && !isMobile())) {\r\n <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n (mouseenter)=\"!isMobile() && submenuAnchor.open()\">\r\n @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n (mouseleave)=\"!isMobile() && mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n @if (option.submenu && !isMobile()) {\r\n <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n (mouseleave)=\"!isMobile() && mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n [tooltip]=\"getPropertyName(sub.property)\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n }\r\n </div>\r\n }\r\n </app-button>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media
|
|
2295
|
+
args: [{ selector: 'app-dropdown-menu', imports: [NgbDropdownModule, CommonModule, ButtonComponent, IconsDirective, ButtonsModalDirective, ButtonsOutlineDirective], template: "<div class=\"d-inline-block\" ngbDropdown container=\"body\">\r\n @if (buttonProps()) {\r\n <button [colorBtn]=\"buttonProps()?.color || null\"\r\n [colorOutlineBtn]=\"!buttonProps()?.color ? buttonProps()?.colorOutline : null\" [disabled]=\"disabled()\"\r\n class=\"button-tilt-hover w-auto w-sm-100\" [ngClass]=\"{\r\n 'btn text-white me-1 fs-6 px-3 py-0 radius-none padd': inputButton(),\r\n 'pbp-6 wrap': !inputButton()\r\n }\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\" (mouseleave)=\"handleMainButtonMouseLeave()\">\r\n @if (buttonProps()?.icon == 'sunat') {\r\n <img src=\"assets/images/Sunat.ico\" class=\"button-icon-hover\" height=\"16px\" alt=\"Sunat\">\r\n }@else {\r\n <i [iconName]=\"buttonProps()?.icon\" class=\"button-icon-hover\"></i>\r\n } {{ buttonProps()?.texto }}\r\n </button>\r\n } @else {\r\n <button class=\"btn btn-sm border-0\" ngbDropdownToggle (mouseenter)=\"handleMainButtonMouseEnter()\"\r\n (mouseleave)=\"handleMainButtonMouseLeave()\" [disabled]=\"disabled()\">\r\n <i class=\"fas fa-align-left fs-6\"></i>\r\n </button>\r\n }\r\n\r\n <div ngbDropdownMenu class=\"my-0 py-0\" (mouseenter)=\"!isMobile() && handleDropdownMouseEnter()\"\r\n (mouseleave)=\"!isMobile() && handleDropdownMouseLeave()\">\r\n @for (option of visibleOptions(); track $index) {\r\n @if (isMobile() && option.submenu) {\r\n @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\" [uploadButton]=\"sub.upload\"\r\n [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n [tooltip]=\"getPropertyName(sub.property)\" [extraClass]=\"\r\n (isFirstMobileItem(sub) ? 'border-top-radius ' : '') +\r\n (isLastMobileItem(sub) ? 'border-bottom-radius' : '')\r\n \" [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n }\r\n }\r\n @else if (!option.submenu || (option.submenu && !isMobile())) {\r\n <div class=\"dropdown-item-with-submenu\" ngbDropdown #submenuAnchor=\"ngbDropdown\"\r\n (mouseenter)=\"!isMobile() && submenuAnchor.open()\">\r\n @if (option.condition !== false && (!option.factor || factores()[option.factor.key])) {\r\n <app-button [icon]=\"option.icon\" [texto]=\"option.text\" (accion)=\"!option.upload && option.action()\"\r\n [uploadButton]=\"option.upload\" [accept]=\"option.accept\"\r\n (fileSelected)=\"option.fileAction && option.fileAction($event)\" [tooltip]=\"getPropertyName(option.property)\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + ($index == visibleOptions().length - 1 ? 'border-bottom-radius' : '')\"\r\n [buttonDeshabilitado]=\"option.property && !propiedades()[option.property.key]\" [dropdownButton]=\"true\"\r\n (mouseleave)=\"!isMobile() && mouseLeaveItem(submenuAnchor, $event, option.text)\">\r\n @if (option.submenu && !isMobile()) {\r\n <div ngbDropdownMenu placement=\"end\" class=\"my-0 py-0 submenu-container\" #submenuDiv\r\n (mouseleave)=\"!isMobile() && mouseLeaveSubmenu(submenuAnchor, $event, option.text)\">\r\n @for (sub of getVisibleSubmenuItems(option.submenu); track $index; let last = $last) {\r\n <app-button [icon]=\"sub.icon\" [texto]=\"sub.text\" (accion)=\"!sub.upload && sub.action()\"\r\n [uploadButton]=\"sub.upload\" [accept]=\"sub.accept\" (fileSelected)=\"sub.fileAction && sub.fileAction($event)\"\r\n [tooltip]=\"getPropertyName(sub.property)\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n [buttonDeshabilitado]=\"sub.property && !propiedades()[sub.property.key]\" [dropdownButton]=\"true\" />\r\n }\r\n </div>\r\n }\r\n </app-button>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n</div>", styles: [".dropdown-item-with-submenu{position:relative;transition:all .3s ease}.submenu-container{position:absolute;left:100%;top:0;margin-top:0!important;opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.dropdown-item-with-submenu:hover .submenu-container,.dropdown-item-with-submenu:focus-within .submenu-container{opacity:1;transform:translateY(0);pointer-events:auto}@keyframes tilt-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-.5deg)}75%{transform:rotate(.5deg)}}@keyframes icon-rotate-pop{0%{transform:rotate(0) scale(1)}25%{transform:rotate(10deg) scale(1.05)}50%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}to{transform:rotate(0) scale(1)}}.button-tilt-hover:hover{animation:tilt-bounce .6s infinite ease-in-out}.button-tilt-hover:hover .button-icon-hover{animation:icon-rotate-pop 1s ease-in-out infinite}.wrap{overflow:hidden;text-overflow:ellipsis}@media(max-width:575px){.d-inline-block{display:block!important}}button.radius-none,.btn.radius-none{border-radius:0!important}.padd{padding:3px 8px!important}\n"] }]
|
|
2294
2296
|
}], propDecorators: { dropdown: [{
|
|
2295
2297
|
type: ViewChild,
|
|
2296
2298
|
args: [NgbDropdown]
|
|
@@ -2324,10 +2326,10 @@ class CardMobileComponent {
|
|
|
2324
2326
|
const r = this.rendered().find(r => r.matches(col, value, row));
|
|
2325
2327
|
return r ? r.render(value, row) : null;
|
|
2326
2328
|
}
|
|
2327
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2328
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2329
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CardMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2330
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: CardMobileComponent, isStandalone: true, selector: "app-card-mobile", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<cdk-virtual-scroll-viewport itemSize=\"120\" [style.height]=\"altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''\" >\r\n <div class=\"row g-2 py-2\">\r\n <div *cdkVirtualFor=\"let item of data(); let i = index\" class=\"col-12\">\r\n <div class=\"card shadow-sm\">\r\n <span class=\"pt-2 px-3 fw-bold fs-7\">{{titleTabla() ?? ''}} {{getIdentifier(item)}}</span>\r\n <div class=\"card-body py-1 my-0\">\r\n @for (col of columns(); track $index) {\r\n @if (col.swmobile) {\r\n <div class=\"d-flex py-1\">\r\n <strong class=\"fs-6 me-2 flex-shrink-0 text-truncate\" style=\"min-width: 90px; max-width: 90px;\">\r\n {{ col.caption }}\r\n </strong>\r\n \r\n <span class=\"fs-6 fw-normal text-break text-wrap flex-grow-1\">\r\n {{ item._format?.[col.fieldname] ?? item[col.fieldname] }}\r\n </span>\r\n \r\n </div>\r\n }\r\n \r\n }\r\n </div>\r\n @if (actions()) {\r\n <div class=\"pb-2 px-3 d-flex justify-content-between align-items-center\">\r\n <app-badge label=\"Acciones:\" color=\"bg-success\"></app-badge>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"actions(); context: { $implicit: item }\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</cdk-virtual-scroll-viewport>", styles: [""], dependencies: [{ kind: "component", type: BadgeComponent, selector: "app-badge", inputs: ["label", "color", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$2.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$2.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$2.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
|
|
2329
2331
|
}
|
|
2330
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CardMobileComponent, decorators: [{
|
|
2331
2333
|
type: Component,
|
|
2332
2334
|
args: [{ selector: 'app-card-mobile', imports: [BadgeComponent, NgTemplateOutlet, ScrollingModule], template: "<cdk-virtual-scroll-viewport itemSize=\"120\" [style.height]=\"altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''\" >\r\n <div class=\"row g-2 py-2\">\r\n <div *cdkVirtualFor=\"let item of data(); let i = index\" class=\"col-12\">\r\n <div class=\"card shadow-sm\">\r\n <span class=\"pt-2 px-3 fw-bold fs-7\">{{titleTabla() ?? ''}} {{getIdentifier(item)}}</span>\r\n <div class=\"card-body py-1 my-0\">\r\n @for (col of columns(); track $index) {\r\n @if (col.swmobile) {\r\n <div class=\"d-flex py-1\">\r\n <strong class=\"fs-6 me-2 flex-shrink-0 text-truncate\" style=\"min-width: 90px; max-width: 90px;\">\r\n {{ col.caption }}\r\n </strong>\r\n \r\n <span class=\"fs-6 fw-normal text-break text-wrap flex-grow-1\">\r\n {{ item._format?.[col.fieldname] ?? item[col.fieldname] }}\r\n </span>\r\n \r\n </div>\r\n }\r\n \r\n }\r\n </div>\r\n @if (actions()) {\r\n <div class=\"pb-2 px-3 d-flex justify-content-between align-items-center\">\r\n <app-badge label=\"Acciones:\" color=\"bg-success\"></app-badge>\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"actions(); context: { $implicit: item }\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</cdk-virtual-scroll-viewport>" }]
|
|
2333
2335
|
}] });
|
|
@@ -2371,12 +2373,12 @@ class PaginadorComponent {
|
|
|
2371
2373
|
this.loading.set(false);
|
|
2372
2374
|
}
|
|
2373
2375
|
}
|
|
2374
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2375
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
2376
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PaginadorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: PaginadorComponent, isStandalone: true, selector: "app-paginador", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, loaddata: { classPropertyName: "loaddata", publicName: "loaddata", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, ngImport: i0, template: "<div class=\"{{`d-flex justify-content-${position()} pe-3`}}\">\r\n <div class=\"contenedor d-flex justify-content-end align-items-center px-3 py-2 rounded-2 gap-1 bg-white\">\r\n <span class=\"fs-6 fw-6\"> Mostrando {{ cantidadDatos() }}/{{ limit() }} </span>\r\n <p class=\"bg-white px-3 py-1 my-0 mx-3 fs-7 rounded-2 fw-5\" style=\"border: 1px solid rgb(222, 222, 222);\"> {{contador()}} </p>\r\n \r\n @if (contador() > 1) {\r\n <button @fadeInOut class=\"py-1 btn btn-sm shadow bg-white rounded-4 px-3\" [disabled]=\"loading()\" (click)=\"retroceder()\"> <i iconName=\"izquierda\"></i></button>\r\n }\r\n <button [disabled]=\"cantidadDatos() < limit() || loading()\" (click)=\"avanzar()\" class=\"py-1 btn btn-sm btn-dark shadow rounded-4 px-3\" > <i iconName=\"derecha\"></i></button>\r\n </div>\r\n \r\n</div>", styles: ["@media(max-width:330px){.contenedor{display:block!important;width:100%;text-align:center}.contenedor span{display:inline-block!important;width:100%!important;padding-bottom:10px!important}.contenedor p{display:block}.contenedor button{margin:6px 2px 0}}.border-p{border:1px solid rgb(222,222,222)}\n"], dependencies: [{ kind: "directive", type: IconsDirective, selector: "[iconName]", inputs: ["iconName"] }], animations: [fadeInOut] });
|
|
2376
2378
|
}
|
|
2377
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2379
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PaginadorComponent, decorators: [{
|
|
2378
2380
|
type: Component,
|
|
2379
|
-
args: [{ selector: 'app-paginador', imports: [IconsDirective], animations: [fadeInOut], template: "<div class=\"{{`d-flex justify-content-${position()} pe-3`}}\">\r\n <div class=\"contenedor d-flex justify-content-end align-items-center px-3 py-2 rounded-2 gap-1 bg-white\">\r\n <span class=\"fs-6 fw-6\"> Mostrando {{ cantidadDatos() }}/{{ limit() }} </span>\r\n <p class=\"bg-white px-3 py-1 my-0 mx-3 fs-7 rounded-2 fw-5\" style=\"border: 1px solid rgb(222, 222, 222);\"> {{contador()}} </p>\r\n \r\n @if (contador() > 1) {\r\n <button @fadeInOut class=\"py-1 btn btn-sm shadow bg-white rounded-4 px-3\" [disabled]=\"loading()\" (click)=\"retroceder()\"> <i iconName=\"izquierda\"></i></button>\r\n }\r\n <button [disabled]=\"cantidadDatos() < limit() || loading()\" (click)=\"avanzar()\" class=\"py-1 btn btn-sm btn-dark shadow rounded-4 px-3\" > <i iconName=\"derecha\"></i></button>\r\n </div>\r\n \r\n</div>", styles: ["@media
|
|
2381
|
+
args: [{ selector: 'app-paginador', imports: [IconsDirective], animations: [fadeInOut], template: "<div class=\"{{`d-flex justify-content-${position()} pe-3`}}\">\r\n <div class=\"contenedor d-flex justify-content-end align-items-center px-3 py-2 rounded-2 gap-1 bg-white\">\r\n <span class=\"fs-6 fw-6\"> Mostrando {{ cantidadDatos() }}/{{ limit() }} </span>\r\n <p class=\"bg-white px-3 py-1 my-0 mx-3 fs-7 rounded-2 fw-5\" style=\"border: 1px solid rgb(222, 222, 222);\"> {{contador()}} </p>\r\n \r\n @if (contador() > 1) {\r\n <button @fadeInOut class=\"py-1 btn btn-sm shadow bg-white rounded-4 px-3\" [disabled]=\"loading()\" (click)=\"retroceder()\"> <i iconName=\"izquierda\"></i></button>\r\n }\r\n <button [disabled]=\"cantidadDatos() < limit() || loading()\" (click)=\"avanzar()\" class=\"py-1 btn btn-sm btn-dark shadow rounded-4 px-3\" > <i iconName=\"derecha\"></i></button>\r\n </div>\r\n \r\n</div>", styles: ["@media(max-width:330px){.contenedor{display:block!important;width:100%;text-align:center}.contenedor span{display:inline-block!important;width:100%!important;padding-bottom:10px!important}.contenedor p{display:block}.contenedor button{margin:6px 2px 0}}.border-p{border:1px solid rgb(222,222,222)}\n"] }]
|
|
2380
2382
|
}] });
|
|
2381
2383
|
|
|
2382
2384
|
class TableAdvanceComponent {
|
|
@@ -2728,12 +2730,12 @@ class TableAdvanceComponent {
|
|
|
2728
2730
|
event.preventDefault();
|
|
2729
2731
|
return { usecase: 3, data: row };
|
|
2730
2732
|
}
|
|
2731
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
2732
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAdvanceComponent, isStandalone: true, selector: "app-table-advance", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitirBusqueda: "emitirBusqueda", emitirCheck: "emitirCheck", emitirCheckCabecera: "emitirCheckCabecera", emitirRadio: "emitirRadio", emitirColumnasFiltrables: "emitirColumnasFiltrables", selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true }], viewQueries: [{ propertyName: "tableHeaders", predicate: ["thElement"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!---\r\n<div class=\"table-container table-responsive\" #tableContainer\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n (scroll)=\"onTableScroll($event)\">\r\n-->\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <!-- [style.height]=\"virtualScrollService.getTotalHeight(itemHeight(), rowFilter().length)\" -->\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start align-items-center d-flex\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n <!-- <button (click)=\"togglePopoverColumn()\" 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 @if (showPopoverColumn()) {\r\n <div class=\"popover-menu-column shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } -->\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n @if (column.tipoCaption === 'check-input') {\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 ms-2 border border-secondary\"\r\n [checked]=\"areAllChecked(column.fieldname)\"\r\n (change)=\"column.event ? toggleAllCheckboxes($event, column.fieldname, rowFilter()) : null\">\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <!--\r\n <tbody\r\n [style.transform]=\"virtualScrollService.getTransform(visibleRange().start, itemHeight())\"\r\n [style.min-height]=\"itemHeight() * rowFilter().length + 'px'\">\r\n @for (row of visibleRows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n -->\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\" \r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }\r\n @else {\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('date') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('number') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"row[column.fieldname] == 1 || row[column.fieldname] == 'S'\"\r\n (change)=\"column.event ? clickCheck(column.fieldname,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('radio-input') {\r\n <td class=\"text-center b-table\">\r\n @if (!column.condition || column.condition(row)) {\r\n <input type=\"radio\" class=\"form-check-input fs-8 mtn-0 border border-secondary\"\r\n name=\"radioGroup\" (change)=\"column.event ? clickRadio(row) : null\">\r\n }\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n @for (seg of getFooterSegments(); track $index) {\r\n @if (seg.type == 'colspan') {\r\n <td class=\"b-table text-start fw-bold\" [attr.colspan]=\"seg.span\">\r\n {{ $index == 0 ? 'Totales' : '' }}\r\n </td>\r\n } @else {\r\n <td class=\"b-table text-end fw-bold\">\r\n @if (seg.type == 'total') {\r\n {{ getTotals(seg.field) | number:'1.2-2' }}\r\n }@else if (seg.type == 'averageSimple') {\r\n {{ getAverageSimple(seg.field) | number:'1.2-2' }}\r\n }\r\n @else if (seg.type == 'averagePonderado') {\r\n {{ getAveragePonderado(seg.field) | number:'1.2-2' }}\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }], animations: [dropdownAnimation, fadeInOut] });
|
|
2733
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableAdvanceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2734
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TableAdvanceComponent, isStandalone: true, selector: "app-table-advance", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitirBusqueda: "emitirBusqueda", emitirCheck: "emitirCheck", emitirCheckCabecera: "emitirCheckCabecera", emitirRadio: "emitirRadio", emitirColumnasFiltrables: "emitirColumnasFiltrables", selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true }], viewQueries: [{ propertyName: "tableHeaders", predicate: ["thElement"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!---\r\n<div class=\"table-container table-responsive\" #tableContainer\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n (scroll)=\"onTableScroll($event)\">\r\n-->\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <!-- [style.height]=\"virtualScrollService.getTotalHeight(itemHeight(), rowFilter().length)\" -->\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start align-items-center d-flex\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n <!-- <button (click)=\"togglePopoverColumn()\" 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 @if (showPopoverColumn()) {\r\n <div class=\"popover-menu-column shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } -->\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n @if (column.tipoCaption === 'check-input') {\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 ms-2 border border-secondary\"\r\n [checked]=\"areAllChecked(column.fieldname)\"\r\n (change)=\"column.event ? toggleAllCheckboxes($event, column.fieldname, rowFilter()) : null\">\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <!--\r\n <tbody\r\n [style.transform]=\"virtualScrollService.getTransform(visibleRange().start, itemHeight())\"\r\n [style.min-height]=\"itemHeight() * rowFilter().length + 'px'\">\r\n @for (row of visibleRows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n -->\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\" \r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }\r\n @else {\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('date') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('number') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"row[column.fieldname] == 1 || row[column.fieldname] == 'S'\"\r\n (change)=\"column.event ? clickCheck(column.fieldname,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('radio-input') {\r\n <td class=\"text-center b-table\">\r\n @if (!column.condition || column.condition(row)) {\r\n <input type=\"radio\" class=\"form-check-input fs-8 mtn-0 border border-secondary\"\r\n name=\"radioGroup\" (change)=\"column.event ? clickRadio(row) : null\">\r\n }\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n @for (seg of getFooterSegments(); track $index) {\r\n @if (seg.type == 'colspan') {\r\n <td class=\"b-table text-start fw-bold\" [attr.colspan]=\"seg.span\">\r\n {{ $index == 0 ? 'Totales' : '' }}\r\n </td>\r\n } @else {\r\n <td class=\"b-table text-end fw-bold\">\r\n @if (seg.type == 'total') {\r\n {{ getTotals(seg.field) | number:'1.2-2' }}\r\n }@else if (seg.type == 'averageSimple') {\r\n {{ getAverageSimple(seg.field) | number:'1.2-2' }}\r\n }\r\n @else if (seg.type == 'averagePonderado') {\r\n {{ getAveragePonderado(seg.field) | number:'1.2-2' }}\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media(max-width:1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }], animations: [dropdownAnimation, fadeInOut] });
|
|
2733
2735
|
}
|
|
2734
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
2736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableAdvanceComponent, decorators: [{
|
|
2735
2737
|
type: Component,
|
|
2736
|
-
args: [{ selector: 'app-table-advance', imports: [FormsModule, CommonModule, DatePipe, DecimalPipe, DropdownCdkComponent], animations: [dropdownAnimation, fadeInOut], providers: [DatePipe, DecimalPipe], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!---\r\n<div class=\"table-container table-responsive\" #tableContainer\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n (scroll)=\"onTableScroll($event)\">\r\n-->\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <!-- [style.height]=\"virtualScrollService.getTotalHeight(itemHeight(), rowFilter().length)\" -->\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start align-items-center d-flex\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n <!-- <button (click)=\"togglePopoverColumn()\" 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 @if (showPopoverColumn()) {\r\n <div class=\"popover-menu-column shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } -->\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n @if (column.tipoCaption === 'check-input') {\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 ms-2 border border-secondary\"\r\n [checked]=\"areAllChecked(column.fieldname)\"\r\n (change)=\"column.event ? toggleAllCheckboxes($event, column.fieldname, rowFilter()) : null\">\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <!--\r\n <tbody\r\n [style.transform]=\"virtualScrollService.getTransform(visibleRange().start, itemHeight())\"\r\n [style.min-height]=\"itemHeight() * rowFilter().length + 'px'\">\r\n @for (row of visibleRows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n -->\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\" \r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }\r\n @else {\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('date') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('number') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"row[column.fieldname] == 1 || row[column.fieldname] == 'S'\"\r\n (change)=\"column.event ? clickCheck(column.fieldname,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('radio-input') {\r\n <td class=\"text-center b-table\">\r\n @if (!column.condition || column.condition(row)) {\r\n <input type=\"radio\" class=\"form-check-input fs-8 mtn-0 border border-secondary\"\r\n name=\"radioGroup\" (change)=\"column.event ? clickRadio(row) : null\">\r\n }\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n @for (seg of getFooterSegments(); track $index) {\r\n @if (seg.type == 'colspan') {\r\n <td class=\"b-table text-start fw-bold\" [attr.colspan]=\"seg.span\">\r\n {{ $index == 0 ? 'Totales' : '' }}\r\n </td>\r\n } @else {\r\n <td class=\"b-table text-end fw-bold\">\r\n @if (seg.type == 'total') {\r\n {{ getTotals(seg.field) | number:'1.2-2' }}\r\n }@else if (seg.type == 'averageSimple') {\r\n {{ getAverageSimple(seg.field) | number:'1.2-2' }}\r\n }\r\n @else if (seg.type == 'averagePonderado') {\r\n {{ getAveragePonderado(seg.field) | number:'1.2-2' }}\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
|
|
2738
|
+
args: [{ selector: 'app-table-advance', imports: [FormsModule, CommonModule, DatePipe, DecimalPipe, DropdownCdkComponent], animations: [dropdownAnimation, fadeInOut], providers: [DatePipe, DecimalPipe], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!---\r\n<div class=\"table-container table-responsive\" #tableContainer\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n (scroll)=\"onTableScroll($event)\">\r\n-->\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <!-- [style.height]=\"virtualScrollService.getTotalHeight(itemHeight(), rowFilter().length)\" -->\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start align-items-center d-flex\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n\r\n <!-- <button (click)=\"togglePopoverColumn()\" 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 @if (showPopoverColumn()) {\r\n <div class=\"popover-menu-column shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\" [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n } -->\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n @if (column.tipoCaption === 'check-input') {\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 ms-2 border border-secondary\"\r\n [checked]=\"areAllChecked(column.fieldname)\"\r\n (change)=\"column.event ? toggleAllCheckboxes($event, column.fieldname, rowFilter()) : null\">\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <!--\r\n <tbody\r\n [style.transform]=\"virtualScrollService.getTransform(visibleRange().start, itemHeight())\"\r\n [style.min-height]=\"itemHeight() * rowFilter().length + 'px'\">\r\n @for (row of visibleRows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n -->\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\" \r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }\r\n @else {\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('date') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy', column.fieldname)\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"text-center b-table\">\r\n </td>\r\n }\r\n\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('number') {\r\n <td class=\"text-end b-table\"\r\n [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2), column.fieldname)\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.' + (column.decimales ?? 2) + '-' + (column.decimales ?? 2)\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"row[column.fieldname] == 1 || row[column.fieldname] == 'S'\"\r\n (change)=\"column.event ? clickCheck(column.fieldname,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('radio-input') {\r\n <td class=\"text-center b-table\">\r\n @if (!column.condition || column.condition(row)) {\r\n <input type=\"radio\" class=\"form-check-input fs-8 mtn-0 border border-secondary\"\r\n name=\"radioGroup\" (change)=\"column.event ? clickRadio(row) : null\">\r\n }\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.fieldname], column.fieldname)\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"b-table\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row.fcreac | date:'dd/MM/yyyy' }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row.factua | date:'dd/MM/yyyy' }} a las {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n @for (seg of getFooterSegments(); track $index) {\r\n @if (seg.type == 'colspan') {\r\n <td class=\"b-table text-start fw-bold\" [attr.colspan]=\"seg.span\">\r\n {{ $index == 0 ? 'Totales' : '' }}\r\n </td>\r\n } @else {\r\n <td class=\"b-table text-end fw-bold\">\r\n @if (seg.type == 'total') {\r\n {{ getTotals(seg.field) | number:'1.2-2' }}\r\n }@else if (seg.type == 'averageSimple') {\r\n {{ getAverageSimple(seg.field) | number:'1.2-2' }}\r\n }\r\n @else if (seg.type == 'averagePonderado') {\r\n {{ getAveragePonderado(seg.field) | number:'1.2-2' }}\r\n }\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media(max-width:1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
|
|
2737
2739
|
}], ctorParameters: () => [], propDecorators: { tableHeaders: [{
|
|
2738
2740
|
type: ViewChildren,
|
|
2739
2741
|
args: ['thElement']
|
|
@@ -3030,12 +3032,12 @@ class TableAdvanceOptimizadaComponent {
|
|
|
3030
3032
|
event.preventDefault();
|
|
3031
3033
|
this.rowEvent.emit({ usecase: 3, data: row });
|
|
3032
3034
|
}
|
|
3033
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3034
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAdvanceOptimizadaComponent, isStandalone: true, selector: "app-table-advance-optimizada", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n\r\n@if (!isMobile()) {\r\n\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of dataVirtual(); track row.idListTsi) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\"\r\n (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n @switch (column.tipo) {\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n class=\"b-table {{getPosition(column)}}\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._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 row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n <tr #anchor>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n @if (isLoading()) {\r\n <span>Cargando m\u00E1s registros...</span>\r\n }\r\n @if (!isLoading() && dataVirtual().length >= 5000) {\r\n <span>No hay m\u00E1s registros</span>\r\n }\r\n </td>\r\n </tr>\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], animations: [dropdownAnimation, fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3035
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableAdvanceOptimizadaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3036
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TableAdvanceOptimizadaComponent, isStandalone: true, selector: "app-table-advance-optimizada", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n\r\n@if (!isMobile()) {\r\n\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of dataVirtual(); track row.idListTsi) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\"\r\n (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n @switch (column.tipo) {\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n class=\"b-table {{getPosition(column)}}\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._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 row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n <tr #anchor>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n @if (isLoading()) {\r\n <span>Cargando m\u00E1s registros...</span>\r\n }\r\n @if (!isLoading() && dataVirtual().length >= 5000) {\r\n <span>No hay m\u00E1s registros</span>\r\n }\r\n </td>\r\n </tr>\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media(max-width:1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }], animations: [dropdownAnimation, fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3035
3037
|
}
|
|
3036
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3038
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableAdvanceOptimizadaComponent, decorators: [{
|
|
3037
3039
|
type: Component,
|
|
3038
|
-
args: [{ selector: 'app-table-advance-optimizada', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent], animations: [dropdownAnimation, fadeInOut], providers: [DatePipe, DecimalPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n\r\n@if (!isMobile()) {\r\n\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of dataVirtual(); track row.idListTsi) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\"\r\n (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n @switch (column.tipo) {\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n class=\"b-table {{getPosition(column)}}\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._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 row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n <tr #anchor>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n @if (isLoading()) {\r\n <span>Cargando m\u00E1s registros...</span>\r\n }\r\n @if (!isLoading() && dataVirtual().length >= 5000) {\r\n <span>No hay m\u00E1s registros</span>\r\n }\r\n </td>\r\n </tr>\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
|
|
3040
|
+
args: [{ selector: 'app-table-advance-optimizada', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent], animations: [dropdownAnimation, fadeInOut], providers: [DatePipe, DecimalPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n @if (showPopoverFilter()) {\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Filtros</div>\r\n <div class=\"form-check form-switch text-start\">\r\n <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n <label class=\"form-check-label\">Todos</label>\r\n </div>\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n\r\n@if (!isMobile()) {\r\n\r\n<div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{'switch_' + col.caption}}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n @for (row of dataVirtual(); track row.idListTsi) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier())), \r\n 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\"\r\n (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [checked]=\"isItemSelected($index)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toogleItem($index, $event)\">\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n @switch (column.tipo) {\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\" [ngClass]=\"getRowClass(row)\"\r\n class=\"b-table {{getPosition(column)}}\">\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._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 row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n <tr #anchor>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\" class=\"text-center text-muted py-3\">\r\n @if (isLoading()) {\r\n <span>Cargando m\u00E1s registros...</span>\r\n }\r\n @if (!isLoading() && dataVirtual().length >= 5000) {\r\n <span>No hay m\u00E1s registros</span>\r\n }\r\n </td>\r\n </tr>\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n</div>\r\n\r\n}\r\n\r\n}\r\n\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media(max-width:1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
|
|
3039
3041
|
}], ctorParameters: () => [], propDecorators: { onResize: [{
|
|
3040
3042
|
type: HostListener,
|
|
3041
3043
|
args: ['window:resize', ['$event']]
|
|
@@ -3197,12 +3199,12 @@ class TableBusquedaComponent {
|
|
|
3197
3199
|
tooglePopover() {
|
|
3198
3200
|
this.showPopover.update(status => !status);
|
|
3199
3201
|
}
|
|
3200
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3201
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableBusquedaComponent, isStandalone: true, selector: "app-table-busqueda", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitirBusqueda: "emitirBusqueda", emitirCheck: "emitirCheck", emitirSelected: "emitirSelected" }, host: { listeners: { "window:keydown": "manejarTeclado($event)" } }, viewQueries: [{ propertyName: "filas", predicate: ["fila"], descendants: true }, { propertyName: "tableHeaders", predicate: ["thElement"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n <div class=\"col-12 mb-2 mt-2 d-flex flex-wrap justify-content-end align-items-center\">\r\n <label for=\"text_busqueda_modal\" class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" id=\"text_busqueda_modal\" class=\"form-control cw-250 ch-25\" (input)=\"textoDigitado($event)\">\r\n </div>\r\n}\r\n\r\n<div class=\"table-container\" [ngClass]=\"mode() == 'normal' ? 'table-responsive' : ''\" [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\r\n<table #table class=\"table table-striped\" [ngClass]=\"mode() == 'normal' ? 'normal-table' : 'flex-table'\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @for (column of columns(); track $index) {\r\n @if (column.type !== 'mostrar' || column.condition()) {\r\n <th #thElement [title]=\"column.name\" [ngClass]=\"colorHeader()== 'normal' ? 'header-normal' : ''\">\r\n {{ column.name }}\r\n @if (sortColumn == column.prop) {\r\n <span (click)=\"sortTable(column.prop)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n \r\n @if (sortColumn !== column.prop) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.prop)\"></i>\r\n }\r\n @if (mode() == 'flex' && $index + 1 != columns().length) {\r\n <span class=\"resize-handle\" (mousedown)=\"onResizeStart($event, thElement)\"></span>\r\n }\r\n </th>\r\n }\r\n }\r\n \r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n\r\n @for (row of rows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': selectedRow == $index, 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\" #fila (click)=\"enviarDataClick(row)\">\r\n\r\n @for (column of columns(); track $index) {\r\n\r\n @if (column.type !== 'mostrar' || column.condition()) {\r\n @switch (column.type) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop] | date:'dd/MM/yyyy')\" [title]=\"row[column.prop] | date:'dd/MM/yyyy'\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n \r\n }\r\n\r\n @case ('status') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaClave[row.situacda]\">\r\n </td>\r\n \r\n }\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n @case ('situacion_number') {\r\n <td [innerHTML]=\"getHighlight(situacTesoreria[row[column.prop]])\" [title]=\"situacTesoreria[row[column.prop]]\" [ngClass]=\"row[column.prop] == 9 ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n @case ('situacion_string') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaStringClave[row[column.prop]]\">\r\n \r\n </td>\r\n \r\n }\r\n\r\n @case ('situacion_rendicion') {\r\n <td [innerHTML]=\"getHighlight(situacDaRendicion[row[column.prop]])\" [title]=\"situacDaRendicion[row[column.prop]]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaClaveRendicion[row[column.prop]]\">\r\n \r\n </td>\r\n \r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end\"\r\n [innerHTML]=\"getHighlight((row[column.prop] ?? 0) | number:(column.pipe ?? '1.2-2'))\"\r\n [title]=\"(row[column.prop] ?? 0) | number:(column.pipe ?? '1.2-2')\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center\" [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center\" [title]=\"checkString[row[column.prop]]\" >\r\n <i class=\"fs-5\" [ngClass]=\"row[column.prop] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center\" >\r\n <input type=\"checkbox\" class=\"form-check-input fs-8\" [checked]=\"row[column.prop] == 1\" (change)=\"column.event ? clicCheck(column.prop,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\">\r\n </td> \r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n }\r\n }\r\n <!-- <td>{{ row[column.prop] }}</td> -->\r\n }\r\n \r\n </tr>\r\n }\r\n\r\n \r\n </tbody>\r\n </table>\r\n</div>", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;color:#000;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;border:1px solid rgb(226,226,226)}.header-normal{background:#aaa!important}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;color:#000;white-space:nowrap;text-overflow:ellipsis;border:1px solid rgb(226,226,226);padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }], animations: [dropdownAnimation] });
|
|
3202
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableBusquedaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3203
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TableBusquedaComponent, isStandalone: true, selector: "app-table-busqueda", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emitirBusqueda: "emitirBusqueda", emitirCheck: "emitirCheck", emitirSelected: "emitirSelected" }, host: { listeners: { "window:keydown": "manejarTeclado($event)" } }, viewQueries: [{ propertyName: "filas", predicate: ["fila"], descendants: true }, { propertyName: "tableHeaders", predicate: ["thElement"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n <div class=\"col-12 mb-2 mt-2 d-flex flex-wrap justify-content-end align-items-center\">\r\n <label for=\"text_busqueda_modal\" class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" id=\"text_busqueda_modal\" class=\"form-control cw-250 ch-25\" (input)=\"textoDigitado($event)\">\r\n </div>\r\n}\r\n\r\n<div class=\"table-container\" [ngClass]=\"mode() == 'normal' ? 'table-responsive' : ''\" [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\r\n<table #table class=\"table table-striped\" [ngClass]=\"mode() == 'normal' ? 'normal-table' : 'flex-table'\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @for (column of columns(); track $index) {\r\n @if (column.type !== 'mostrar' || column.condition()) {\r\n <th #thElement [title]=\"column.name\" [ngClass]=\"colorHeader()== 'normal' ? 'header-normal' : ''\">\r\n {{ column.name }}\r\n @if (sortColumn == column.prop) {\r\n <span (click)=\"sortTable(column.prop)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n \r\n @if (sortColumn !== column.prop) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.prop)\"></i>\r\n }\r\n @if (mode() == 'flex' && $index + 1 != columns().length) {\r\n <span class=\"resize-handle\" (mousedown)=\"onResizeStart($event, thElement)\"></span>\r\n }\r\n </th>\r\n }\r\n }\r\n \r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n\r\n @for (row of rows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': selectedRow == $index, 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\" #fila (click)=\"enviarDataClick(row)\">\r\n\r\n @for (column of columns(); track $index) {\r\n\r\n @if (column.type !== 'mostrar' || column.condition()) {\r\n @switch (column.type) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop] | date:'dd/MM/yyyy')\" [title]=\"row[column.prop] | date:'dd/MM/yyyy'\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n \r\n }\r\n\r\n @case ('status') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaClave[row.situacda]\">\r\n </td>\r\n \r\n }\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n @case ('situacion_number') {\r\n <td [innerHTML]=\"getHighlight(situacTesoreria[row[column.prop]])\" [title]=\"situacTesoreria[row[column.prop]]\" [ngClass]=\"row[column.prop] == 9 ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n @case ('situacion_string') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaStringClave[row[column.prop]]\">\r\n \r\n </td>\r\n \r\n }\r\n\r\n @case ('situacion_rendicion') {\r\n <td [innerHTML]=\"getHighlight(situacDaRendicion[row[column.prop]])\" [title]=\"situacDaRendicion[row[column.prop]]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaClaveRendicion[row[column.prop]]\">\r\n \r\n </td>\r\n \r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end\"\r\n [innerHTML]=\"getHighlight((row[column.prop] ?? 0) | number:(column.pipe ?? '1.2-2'))\"\r\n [title]=\"(row[column.prop] ?? 0) | number:(column.pipe ?? '1.2-2')\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center\" [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center\" [title]=\"checkString[row[column.prop]]\" >\r\n <i class=\"fs-5\" [ngClass]=\"row[column.prop] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center\" >\r\n <input type=\"checkbox\" class=\"form-check-input fs-8\" [checked]=\"row[column.prop] == 1\" (change)=\"column.event ? clicCheck(column.prop,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\">\r\n </td> \r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n }\r\n }\r\n <!-- <td>{{ row[column.prop] }}</td> -->\r\n }\r\n \r\n </tr>\r\n }\r\n\r\n \r\n </tbody>\r\n </table>\r\n</div>", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media(max-width:1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;color:#000;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;border:1px solid rgb(226,226,226)}.header-normal{background:#aaa!important}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;color:#000;white-space:nowrap;text-overflow:ellipsis;border:1px solid rgb(226,226,226);padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }], animations: [dropdownAnimation] });
|
|
3202
3204
|
}
|
|
3203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3205
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableBusquedaComponent, decorators: [{
|
|
3204
3206
|
type: Component,
|
|
3205
|
-
args: [{ selector: 'app-table-busqueda', imports: [CommonModule, FormsModule], animations: [dropdownAnimation], template: "@if (withFiltro()) {\r\n <div class=\"col-12 mb-2 mt-2 d-flex flex-wrap justify-content-end align-items-center\">\r\n <label for=\"text_busqueda_modal\" class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" id=\"text_busqueda_modal\" class=\"form-control cw-250 ch-25\" (input)=\"textoDigitado($event)\">\r\n </div>\r\n}\r\n\r\n<div class=\"table-container\" [ngClass]=\"mode() == 'normal' ? 'table-responsive' : ''\" [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\r\n<table #table class=\"table table-striped\" [ngClass]=\"mode() == 'normal' ? 'normal-table' : 'flex-table'\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @for (column of columns(); track $index) {\r\n @if (column.type !== 'mostrar' || column.condition()) {\r\n <th #thElement [title]=\"column.name\" [ngClass]=\"colorHeader()== 'normal' ? 'header-normal' : ''\">\r\n {{ column.name }}\r\n @if (sortColumn == column.prop) {\r\n <span (click)=\"sortTable(column.prop)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n \r\n @if (sortColumn !== column.prop) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.prop)\"></i>\r\n }\r\n @if (mode() == 'flex' && $index + 1 != columns().length) {\r\n <span class=\"resize-handle\" (mousedown)=\"onResizeStart($event, thElement)\"></span>\r\n }\r\n </th>\r\n }\r\n }\r\n \r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n\r\n @for (row of rows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': selectedRow == $index, 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\" #fila (click)=\"enviarDataClick(row)\">\r\n\r\n @for (column of columns(); track $index) {\r\n\r\n @if (column.type !== 'mostrar' || column.condition()) {\r\n @switch (column.type) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop] | date:'dd/MM/yyyy')\" [title]=\"row[column.prop] | date:'dd/MM/yyyy'\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n \r\n }\r\n\r\n @case ('status') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaClave[row.situacda]\">\r\n </td>\r\n \r\n }\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n @case ('situacion_number') {\r\n <td [innerHTML]=\"getHighlight(situacTesoreria[row[column.prop]])\" [title]=\"situacTesoreria[row[column.prop]]\" [ngClass]=\"row[column.prop] == 9 ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n @case ('situacion_string') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaStringClave[row[column.prop]]\">\r\n \r\n </td>\r\n \r\n }\r\n\r\n @case ('situacion_rendicion') {\r\n <td [innerHTML]=\"getHighlight(situacDaRendicion[row[column.prop]])\" [title]=\"situacDaRendicion[row[column.prop]]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaClaveRendicion[row[column.prop]]\">\r\n \r\n </td>\r\n \r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end\"\r\n [innerHTML]=\"getHighlight((row[column.prop] ?? 0) | number:(column.pipe ?? '1.2-2'))\"\r\n [title]=\"(row[column.prop] ?? 0) | number:(column.pipe ?? '1.2-2')\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center\" [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center\" [title]=\"checkString[row[column.prop]]\" >\r\n <i class=\"fs-5\" [ngClass]=\"row[column.prop] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center\" >\r\n <input type=\"checkbox\" class=\"form-check-input fs-8\" [checked]=\"row[column.prop] == 1\" (change)=\"column.event ? clicCheck(column.prop,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\">\r\n </td> \r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n }\r\n }\r\n <!-- <td>{{ row[column.prop] }}</td> -->\r\n }\r\n \r\n </tr>\r\n }\r\n\r\n \r\n </tbody>\r\n </table>\r\n</div>", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;color:#000;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;border:1px solid rgb(226,226,226)}.header-normal{background:#aaa!important}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;color:#000;white-space:nowrap;text-overflow:ellipsis;border:1px solid rgb(226,226,226);padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}\n"] }]
|
|
3207
|
+
args: [{ selector: 'app-table-busqueda', imports: [CommonModule, FormsModule], animations: [dropdownAnimation], template: "@if (withFiltro()) {\r\n <div class=\"col-12 mb-2 mt-2 d-flex flex-wrap justify-content-end align-items-center\">\r\n <label for=\"text_busqueda_modal\" class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" id=\"text_busqueda_modal\" class=\"form-control cw-250 ch-25\" (input)=\"textoDigitado($event)\">\r\n </div>\r\n}\r\n\r\n<div class=\"table-container\" [ngClass]=\"mode() == 'normal' ? 'table-responsive' : ''\" [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\r\n<table #table class=\"table table-striped\" [ngClass]=\"mode() == 'normal' ? 'normal-table' : 'flex-table'\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @for (column of columns(); track $index) {\r\n @if (column.type !== 'mostrar' || column.condition()) {\r\n <th #thElement [title]=\"column.name\" [ngClass]=\"colorHeader()== 'normal' ? 'header-normal' : ''\">\r\n {{ column.name }}\r\n @if (sortColumn == column.prop) {\r\n <span (click)=\"sortTable(column.prop)\" class=\"cursor-pointer\">\r\n <i [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n \r\n @if (sortColumn !== column.prop) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.prop)\"></i>\r\n }\r\n @if (mode() == 'flex' && $index + 1 != columns().length) {\r\n <span class=\"resize-handle\" (mousedown)=\"onResizeStart($event, thElement)\"></span>\r\n }\r\n </th>\r\n }\r\n }\r\n \r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n\r\n @for (row of rows(); track $index) {\r\n <tr [ngClass]=\"{'table-active': selectedRow == $index, 'grilla-error': getSituacionNumberFromColumns(row, columns()) == 9}\" #fila (click)=\"enviarDataClick(row)\">\r\n\r\n @for (column of columns(); track $index) {\r\n\r\n @if (column.type !== 'mostrar' || column.condition()) {\r\n @switch (column.type) {\r\n @case ('fecha') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop] | date:'dd/MM/yyyy')\" [title]=\"row[column.prop] | date:'dd/MM/yyyy'\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n \r\n }\r\n\r\n @case ('status') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaClave[row.situacda]\">\r\n </td>\r\n \r\n }\r\n @case ('situacion') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n @case ('situacion_number') {\r\n <td [innerHTML]=\"getHighlight(situacTesoreria[row[column.prop]])\" [title]=\"situacTesoreria[row[column.prop]]\" [ngClass]=\"row[column.prop] == 9 ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n @case ('situacion_string') {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaStringClave[row[column.prop]]\">\r\n \r\n </td>\r\n \r\n }\r\n\r\n @case ('situacion_rendicion') {\r\n <td [innerHTML]=\"getHighlight(situacDaRendicion[row[column.prop]])\" [title]=\"situacDaRendicion[row[column.prop]]\" [ngClass]=\"row.situac == 'J' ? 'text-error': situacDaClaveRendicion[row[column.prop]]\">\r\n \r\n </td>\r\n \r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end\"\r\n [innerHTML]=\"getHighlight((row[column.prop] ?? 0) | number:(column.pipe ?? '1.2-2'))\"\r\n [title]=\"(row[column.prop] ?? 0) | number:(column.pipe ?? '1.2-2')\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center\" [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center\" [title]=\"checkString[row[column.prop]]\" >\r\n <i class=\"fs-5\" [ngClass]=\"row[column.prop] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('check-input') {\r\n <td class=\"text-center\" >\r\n <input type=\"checkbox\" class=\"form-check-input fs-8\" [checked]=\"row[column.prop] == 1\" (change)=\"column.event ? clicCheck(column.prop,$event,row) : null\">\r\n </td>\r\n }\r\n\r\n @case ('mostrar') {\r\n @if (column.condition()) {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\">\r\n </td> \r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row[column.prop])\" [title]=\"row[column.prop]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n \r\n </td>\r\n \r\n }\r\n }\r\n }\r\n <!-- <td>{{ row[column.prop] }}</td> -->\r\n }\r\n \r\n </tr>\r\n }\r\n\r\n \r\n </tbody>\r\n </table>\r\n</div>", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media(max-width:1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;color:#000;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;border:1px solid rgb(226,226,226)}.header-normal{background:#aaa!important}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;color:#000;white-space:nowrap;text-overflow:ellipsis;border:1px solid rgb(226,226,226);padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}\n"] }]
|
|
3206
3208
|
}], propDecorators: { filas: [{
|
|
3207
3209
|
type: ViewChildren,
|
|
3208
3210
|
args: ['fila']
|
|
@@ -3498,12 +3500,12 @@ class TableDetalleComponent {
|
|
|
3498
3500
|
const regex = new RegExp(`(${this.busqueda()})`, 'gi');
|
|
3499
3501
|
return text?.replace(regex, '<mark>$1</mark>');
|
|
3500
3502
|
}
|
|
3501
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3502
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableDetalleComponent, isStandalone: true, selector: "app-table-detalle", inputs: { selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, busqueda: { classPropertyName: "busqueda", publicName: "busqueda", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, lastItemDisabled: { classPropertyName: "lastItemDisabled", publicName: "lastItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withEditItem: { classPropertyName: "withEditItem", publicName: "withEditItem", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, deleteItems: { classPropertyName: "deleteItems", publicName: "deleteItems", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRadio: { classPropertyName: "selectedRadio", publicName: "selectedRadio", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", busqueda: "busquedaChange", deleteItems: "deleteItemsChange", selectItems: "selectItemsChange", selectedRadio: "selectedRadioChange", editItem: "editItem" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n</div>\r\n}\r\n<div class=\"table-container table-responsive\"\r\n [style.max-height]=\"altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''\"\r\n [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withCheckbox()) {\r\n <th scope=\"col\" class=\"text-center b-table w-min\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (withEditItem()) {\r\n <th scope=\"col\" class=\"text-center b-table w-min\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th scope=\"col\" class=\"b-table w-min mwp-50\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\"></th>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.visible) {\r\n <th scope=\"col\" class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"widthDefault(column) + 'px'\" [style.min-width]=\"widthDefault(column) + 'px'\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n {{ column.caption }}\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of rowFilter(); track iRow; let iRow = $index) {\r\n @let isLast = validaAccionDescri(iRow);\r\n @let rowClass = getRowClass(row);\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n [class]=\"rowClass\" (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table w-min\" [class]=\"rowClass\">\r\n @if(!resolveCell('checkbox', row)?.hidden){\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [disabled]=\"!lastItemDisabled() ? false : validaLastRegistro($index)\"\r\n [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n }\r\n </td>\r\n }\r\n\r\n @if (withEditItem()) {\r\n <td scope=\"col\" class=\"text-start b-table w-min\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <i (click)=\"validaEdit(iRow) ? editItem.emit(row) : null \"\r\n class=\"fas fa-pen fs-7 px-2 py-2 my-1 rounded-2 text-secondary shadow-sm\"\r\n [ngClass]=\"validaEdit(iRow) ? 'cursor-pointer' : ''\" title=\"Editar articulo\"></i>\r\n </div>\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table w-min\">\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </div>\r\n </td>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.visible) {\r\n @switch (column.tipo) {\r\n\r\n @case ('input-radio') {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"radio\" class=\"form-check-input fs-8 border border-secondary m-0 p-0\"\r\n [disabled]=\"lastItemDisabled() && validaLastRegistro(iRow)\" [checked]=\"selectedRadio() === iRow\"\r\n (change)=\"clickRadio(iRow)\">\r\n </td>\r\n }\r\n\r\n @case ('fecha') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n {{ row[column.fieldname] | date:'dd/MM/yyyy' }}\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\" [title]=\"limpiarNumero(row[column.fieldname]) | number:'1.2-2'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n {{limpiarNumero(row[column.fieldname]) | number:'1.2-2'}}\r\n </td>\r\n }\r\n\r\n @case ('list-select') {\r\n <td class=\"text-center b-table\" [title]=\"row[column.fieldname]\">\r\n <div ngbDropdown class=\"d-inline-block\" container=\"body\">\r\n <div class=\"h-100 bg-sidebar d-flex align-items-center px-1\">\r\n <button [disabled]=\"!isLast\" class=\"border-0 bg-none\"\r\n [ngClass]=\"!isLast ? 'text-muted' : 'text-input'\" ngbDropdownToggle>\r\n {{row[column.fieldname]}}\r\n </button>\r\n </div>\r\n <div ngbDropdownMenu class=\"my-0 py-0\">\r\n @for (item of column.lista; track $index; let last = $last) {\r\n <app-button [texto]=\"item.text\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n [dropdownButton]=\"true\" (accion)=\"item?.action(row,item.codigo)\" />\r\n }\r\n </div>\r\n </div>\r\n <!-- <app-dropdown-menu [options]=\"column.lista\" [disabled]=\"lastItemDisabled() ? false : !validaLastRegistro($index)\" [buttonProperties]=\"{color:'none',texto:row[column.fieldname]}\"/> -->\r\n </td>\r\n\r\n }\r\n\r\n @case ('input') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n (focus)=\"focusData(row[column.fieldname])\"\r\n (blur)=\"!validarData(row[column.fieldname]) ? null : column?.blur(row)\"\r\n (keyup.enter)=\"!validarData(row[column.fieldname]) ? null : column?.enter(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n </td>\r\n }\r\n\r\n @case ('input-date') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"date\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n (blur)=\"column?.blur(row)\" (keyup.enter)=\"column?.enter(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n </td>\r\n }\r\n\r\n @case ('input-etiqueta') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"etiqueta\" [withDetails]=\"true\"\r\n [(valuedes)]=\"row[column.fieldname]\" [(disabled)]=\"row.disabledEtiqueta\"\r\n [auxiliarData]=\"{tipinv:row.tipinv,codart:row.codart,codtit:row.codtit,codalm:row.codalm}\"\r\n (emitirAdicionalData)=\"manejarDataEtiqueta($event,row)\"\r\n (disabledChange)=\"limpiarEtiqueta($event,row)\" [withBuscar2]=\"true\"\r\n [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n </td>\r\n }\r\n\r\n @case ('input-afecta') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"tafecta\" [(valuecod)]=\"row[column.fieldname]\"\r\n [(disabled)]=\"row.disabledEtiqueta\" [(valuedes)]=\"row.dtipafec\" viewInput=\"cod\"\r\n [withBuscar]=\"true\" [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n </td>\r\n }\r\n\r\n @case ('input-number') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control text-end\"\r\n [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n [disabled]=\"row.disabledAll ?? false\" onlyNumber>\r\n </td>\r\n }\r\n\r\n @case ('input-decimal') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control text-end w-100\"\r\n [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n [appDecimal]=\"column.pipe\" [readonly]=\"column.readonly ? column.readonly(row) : false\"\r\n [disabled]=\"row.disabledAll ?? generateKeyDisabled(row,column)\" onlyNumber>\r\n </td>\r\n }\r\n\r\n @case ('input-select') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <select class=\"form-select\" name=\"{{`cbo_lista_${row[column.fieldname]}`}}\"\r\n id=\"{{`cbo_lista_${row[column.fieldname]}`}}\" [(ngModel)]=\"row[column.fieldname]\"\r\n (change)=\"validarFunction(column.change)?.(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n @for (item of column.lista; track $index) {\r\n <option [value]=\"item[column.keyCodigo]\"> {{ item[column.keyDescri]}} </option>\r\n }\r\n </select>\r\n </td>\r\n }\r\n\r\n @case ('stock') {\r\n <td class=\"b-table text-center\" [title]=\"row[column.fieldname] ? row[column.fieldname] : 'Sin Stock'\">\r\n @if (limpiarNumero(row[column.fieldname]) > 0) {\r\n {{row[column.fieldname]}}\r\n }@else {\r\n <i class=\"fas fa-times text-danger fw-bold fs-4\"></i>\r\n }\r\n </td>\r\n }\r\n\r\n @default {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <span [ngClass]=\"isLast ? 'cursor-pointer' : ''\"\r\n (click)=\"isLast ? column?.clic() : null\">{{row[column.fieldname]}}</span>\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", styles: ["thead{position:sticky;top:0;z-index:1}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.table-blank{--bs-table-bg-state: white !important}.header-normal{background:#cecece!important}.normal-table thead tr th{font-size:11px;text-align:start;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}.w-min{max-width:40px!important;width:40px!important;min-width:40px!important}.bg-red{background-color:red}.bg-red i,.bg-red span,.bg-red button,.bg-red td,.bg-red input,.bg-red select,.bg-red-input{color:red!important}.bg-blue{background-color:#00f}.bg-blue i,.bg-blue span,.bg-blue button,.bg-blue td,.bg-blue input,.bg-blue select,.bg-blue-input{color:#00f!important}.bg-yellow{background-color:#ff0}.bg-green{background-color:#adff2f}.bg-initial{background-color:initial}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "directive", type: DecimalDirective, selector: "[appDecimal]", inputs: ["appDecimal"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]" }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], outputs: ["accion", "fileSelected"] }] });
|
|
3503
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableDetalleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3504
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TableDetalleComponent, isStandalone: true, selector: "app-table-detalle", inputs: { selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, busqueda: { classPropertyName: "busqueda", publicName: "busqueda", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, lastItemDisabled: { classPropertyName: "lastItemDisabled", publicName: "lastItemDisabled", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withEditItem: { classPropertyName: "withEditItem", publicName: "withEditItem", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, deleteItems: { classPropertyName: "deleteItems", publicName: "deleteItems", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, selectedRadio: { classPropertyName: "selectedRadio", publicName: "selectedRadio", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", busqueda: "busquedaChange", deleteItems: "deleteItemsChange", selectItems: "selectItemsChange", selectedRadio: "selectedRadioChange", editItem: "editItem" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n</div>\r\n}\r\n<div class=\"table-container table-responsive\"\r\n [style.max-height]=\"altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''\"\r\n [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withCheckbox()) {\r\n <th scope=\"col\" class=\"text-center b-table w-min\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (withEditItem()) {\r\n <th scope=\"col\" class=\"text-center b-table w-min\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th scope=\"col\" class=\"b-table w-min mwp-50\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\"></th>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.visible) {\r\n <th scope=\"col\" class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"widthDefault(column) + 'px'\" [style.min-width]=\"widthDefault(column) + 'px'\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n {{ column.caption }}\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of rowFilter(); track iRow; let iRow = $index) {\r\n @let isLast = validaAccionDescri(iRow);\r\n @let rowClass = getRowClass(row);\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n [class]=\"rowClass\" (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table w-min\" [class]=\"rowClass\">\r\n @if(!resolveCell('checkbox', row)?.hidden){\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [disabled]=\"!lastItemDisabled() ? false : validaLastRegistro($index)\"\r\n [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n }\r\n </td>\r\n }\r\n\r\n @if (withEditItem()) {\r\n <td scope=\"col\" class=\"text-start b-table w-min\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <i (click)=\"validaEdit(iRow) ? editItem.emit(row) : null \"\r\n class=\"fas fa-pen fs-7 px-2 py-2 my-1 rounded-2 text-secondary shadow-sm\"\r\n [ngClass]=\"validaEdit(iRow) ? 'cursor-pointer' : ''\" title=\"Editar articulo\"></i>\r\n </div>\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table w-min\">\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </div>\r\n </td>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.visible) {\r\n @switch (column.tipo) {\r\n\r\n @case ('input-radio') {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"radio\" class=\"form-check-input fs-8 border border-secondary m-0 p-0\"\r\n [disabled]=\"lastItemDisabled() && validaLastRegistro(iRow)\" [checked]=\"selectedRadio() === iRow\"\r\n (change)=\"clickRadio(iRow)\">\r\n </td>\r\n }\r\n\r\n @case ('fecha') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n {{ row[column.fieldname] | date:'dd/MM/yyyy' }}\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\" [title]=\"limpiarNumero(row[column.fieldname]) | number:'1.2-2'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n {{limpiarNumero(row[column.fieldname]) | number:'1.2-2'}}\r\n </td>\r\n }\r\n\r\n @case ('list-select') {\r\n <td class=\"text-center b-table\" [title]=\"row[column.fieldname]\">\r\n <div ngbDropdown class=\"d-inline-block\" container=\"body\">\r\n <div class=\"h-100 bg-sidebar d-flex align-items-center px-1\">\r\n <button [disabled]=\"!isLast\" class=\"border-0 bg-none\"\r\n [ngClass]=\"!isLast ? 'text-muted' : 'text-input'\" ngbDropdownToggle>\r\n {{row[column.fieldname]}}\r\n </button>\r\n </div>\r\n <div ngbDropdownMenu class=\"my-0 py-0\">\r\n @for (item of column.lista; track $index; let last = $last) {\r\n <app-button [texto]=\"item.text\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n [dropdownButton]=\"true\" (accion)=\"item?.action(row,item.codigo)\" />\r\n }\r\n </div>\r\n </div>\r\n <!-- <app-dropdown-menu [options]=\"column.lista\" [disabled]=\"lastItemDisabled() ? false : !validaLastRegistro($index)\" [buttonProperties]=\"{color:'none',texto:row[column.fieldname]}\"/> -->\r\n </td>\r\n\r\n }\r\n\r\n @case ('input') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n (focus)=\"focusData(row[column.fieldname])\"\r\n (blur)=\"!validarData(row[column.fieldname]) ? null : column?.blur(row)\"\r\n (keyup.enter)=\"!validarData(row[column.fieldname]) ? null : column?.enter(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n </td>\r\n }\r\n\r\n @case ('input-date') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"date\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n (blur)=\"column?.blur(row)\" (keyup.enter)=\"column?.enter(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n </td>\r\n }\r\n\r\n @case ('input-etiqueta') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"etiqueta\" [withDetails]=\"true\"\r\n [(valuedes)]=\"row[column.fieldname]\" [(disabled)]=\"row.disabledEtiqueta\"\r\n [auxiliarData]=\"{tipinv:row.tipinv,codart:row.codart,codtit:row.codtit,codalm:row.codalm}\"\r\n (emitirAdicionalData)=\"manejarDataEtiqueta($event,row)\"\r\n (disabledChange)=\"limpiarEtiqueta($event,row)\" [withBuscar2]=\"true\"\r\n [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n </td>\r\n }\r\n\r\n @case ('input-afecta') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"tafecta\" [(valuecod)]=\"row[column.fieldname]\"\r\n [(disabled)]=\"row.disabledEtiqueta\" [(valuedes)]=\"row.dtipafec\" viewInput=\"cod\"\r\n [withBuscar]=\"true\" [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n </td>\r\n }\r\n\r\n @case ('input-number') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control text-end\"\r\n [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n [disabled]=\"row.disabledAll ?? false\" onlyNumber>\r\n </td>\r\n }\r\n\r\n @case ('input-decimal') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control text-end w-100\"\r\n [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n [appDecimal]=\"column.pipe\" [readonly]=\"column.readonly ? column.readonly(row) : false\"\r\n [disabled]=\"row.disabledAll ?? generateKeyDisabled(row,column)\" onlyNumber>\r\n </td>\r\n }\r\n\r\n @case ('input-select') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <select class=\"form-select\" name=\"{{`cbo_lista_${row[column.fieldname]}`}}\"\r\n id=\"{{`cbo_lista_${row[column.fieldname]}`}}\" [(ngModel)]=\"row[column.fieldname]\"\r\n (change)=\"validarFunction(column.change)?.(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n @for (item of column.lista; track $index) {\r\n <option [value]=\"item[column.keyCodigo]\"> {{ item[column.keyDescri]}} </option>\r\n }\r\n </select>\r\n </td>\r\n }\r\n\r\n @case ('stock') {\r\n <td class=\"b-table text-center\" [title]=\"row[column.fieldname] ? row[column.fieldname] : 'Sin Stock'\">\r\n @if (limpiarNumero(row[column.fieldname]) > 0) {\r\n {{row[column.fieldname]}}\r\n }@else {\r\n <i class=\"fas fa-times text-danger fw-bold fs-4\"></i>\r\n }\r\n </td>\r\n }\r\n\r\n @default {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <span [ngClass]=\"isLast ? 'cursor-pointer' : ''\"\r\n (click)=\"isLast ? column?.clic() : null\">{{row[column.fieldname]}}</span>\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", styles: ["thead{position:sticky;top:0;z-index:1}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.table-blank{--bs-table-bg-state: white !important}.header-normal{background:#cecece!important}.normal-table thead tr th{font-size:11px;text-align:start;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}.w-min{max-width:40px!important;width:40px!important;min-width:40px!important}.bg-red{background-color:red}.bg-red i,.bg-red span,.bg-red button,.bg-red td,.bg-red input,.bg-red select,.bg-red-input{color:red!important}.bg-blue{background-color:#00f}.bg-blue i,.bg-blue span,.bg-blue button,.bg-blue td,.bg-blue input,.bg-blue select,.bg-blue-input{color:#00f!important}.bg-yellow{background-color:#ff0}.bg-green{background-color:#adff2f}.bg-initial{background-color:initial}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "directive", type: DecimalDirective, selector: "[appDecimal]", inputs: ["appDecimal"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]" }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], outputs: ["accion", "fileSelected"] }] });
|
|
3503
3505
|
}
|
|
3504
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3506
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableDetalleComponent, decorators: [{
|
|
3505
3507
|
type: Component,
|
|
3506
|
-
args: [{ selector: 'app-table-detalle', imports: [FormsModule, CommonModule, DecimalDirective, OnlyNumberDirective, NgbDropdownModule, ButtonComponent], providers: [DatePipe, DecimalPipe], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n</div>\r\n}\r\n<div class=\"table-container table-responsive\"\r\n [style.max-height]=\"altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''\"\r\n [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withCheckbox()) {\r\n <th scope=\"col\" class=\"text-center b-table w-min\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (withEditItem()) {\r\n <th scope=\"col\" class=\"text-center b-table w-min\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th scope=\"col\" class=\"b-table w-min mwp-50\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\"></th>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.visible) {\r\n <th scope=\"col\" class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"widthDefault(column) + 'px'\" [style.min-width]=\"widthDefault(column) + 'px'\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n {{ column.caption }}\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of rowFilter(); track iRow; let iRow = $index) {\r\n @let isLast = validaAccionDescri(iRow);\r\n @let rowClass = getRowClass(row);\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n [class]=\"rowClass\" (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table w-min\" [class]=\"rowClass\">\r\n @if(!resolveCell('checkbox', row)?.hidden){\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [disabled]=\"!lastItemDisabled() ? false : validaLastRegistro($index)\"\r\n [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n }\r\n </td>\r\n }\r\n\r\n @if (withEditItem()) {\r\n <td scope=\"col\" class=\"text-start b-table w-min\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <i (click)=\"validaEdit(iRow) ? editItem.emit(row) : null \"\r\n class=\"fas fa-pen fs-7 px-2 py-2 my-1 rounded-2 text-secondary shadow-sm\"\r\n [ngClass]=\"validaEdit(iRow) ? 'cursor-pointer' : ''\" title=\"Editar articulo\"></i>\r\n </div>\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table w-min\">\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </div>\r\n </td>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.visible) {\r\n @switch (column.tipo) {\r\n\r\n @case ('input-radio') {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"radio\" class=\"form-check-input fs-8 border border-secondary m-0 p-0\"\r\n [disabled]=\"lastItemDisabled() && validaLastRegistro(iRow)\" [checked]=\"selectedRadio() === iRow\"\r\n (change)=\"clickRadio(iRow)\">\r\n </td>\r\n }\r\n\r\n @case ('fecha') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n {{ row[column.fieldname] | date:'dd/MM/yyyy' }}\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\" [title]=\"limpiarNumero(row[column.fieldname]) | number:'1.2-2'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n {{limpiarNumero(row[column.fieldname]) | number:'1.2-2'}}\r\n </td>\r\n }\r\n\r\n @case ('list-select') {\r\n <td class=\"text-center b-table\" [title]=\"row[column.fieldname]\">\r\n <div ngbDropdown class=\"d-inline-block\" container=\"body\">\r\n <div class=\"h-100 bg-sidebar d-flex align-items-center px-1\">\r\n <button [disabled]=\"!isLast\" class=\"border-0 bg-none\"\r\n [ngClass]=\"!isLast ? 'text-muted' : 'text-input'\" ngbDropdownToggle>\r\n {{row[column.fieldname]}}\r\n </button>\r\n </div>\r\n <div ngbDropdownMenu class=\"my-0 py-0\">\r\n @for (item of column.lista; track $index; let last = $last) {\r\n <app-button [texto]=\"item.text\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n [dropdownButton]=\"true\" (accion)=\"item?.action(row,item.codigo)\" />\r\n }\r\n </div>\r\n </div>\r\n <!-- <app-dropdown-menu [options]=\"column.lista\" [disabled]=\"lastItemDisabled() ? false : !validaLastRegistro($index)\" [buttonProperties]=\"{color:'none',texto:row[column.fieldname]}\"/> -->\r\n </td>\r\n\r\n }\r\n\r\n @case ('input') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n (focus)=\"focusData(row[column.fieldname])\"\r\n (blur)=\"!validarData(row[column.fieldname]) ? null : column?.blur(row)\"\r\n (keyup.enter)=\"!validarData(row[column.fieldname]) ? null : column?.enter(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n </td>\r\n }\r\n\r\n @case ('input-date') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"date\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n (blur)=\"column?.blur(row)\" (keyup.enter)=\"column?.enter(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n </td>\r\n }\r\n\r\n @case ('input-etiqueta') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"etiqueta\" [withDetails]=\"true\"\r\n [(valuedes)]=\"row[column.fieldname]\" [(disabled)]=\"row.disabledEtiqueta\"\r\n [auxiliarData]=\"{tipinv:row.tipinv,codart:row.codart,codtit:row.codtit,codalm:row.codalm}\"\r\n (emitirAdicionalData)=\"manejarDataEtiqueta($event,row)\"\r\n (disabledChange)=\"limpiarEtiqueta($event,row)\" [withBuscar2]=\"true\"\r\n [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n </td>\r\n }\r\n\r\n @case ('input-afecta') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"tafecta\" [(valuecod)]=\"row[column.fieldname]\"\r\n [(disabled)]=\"row.disabledEtiqueta\" [(valuedes)]=\"row.dtipafec\" viewInput=\"cod\"\r\n [withBuscar]=\"true\" [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n </td>\r\n }\r\n\r\n @case ('input-number') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control text-end\"\r\n [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n [disabled]=\"row.disabledAll ?? false\" onlyNumber>\r\n </td>\r\n }\r\n\r\n @case ('input-decimal') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control text-end w-100\"\r\n [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n [appDecimal]=\"column.pipe\" [readonly]=\"column.readonly ? column.readonly(row) : false\"\r\n [disabled]=\"row.disabledAll ?? generateKeyDisabled(row,column)\" onlyNumber>\r\n </td>\r\n }\r\n\r\n @case ('input-select') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <select class=\"form-select\" name=\"{{`cbo_lista_${row[column.fieldname]}`}}\"\r\n id=\"{{`cbo_lista_${row[column.fieldname]}`}}\" [(ngModel)]=\"row[column.fieldname]\"\r\n (change)=\"validarFunction(column.change)?.(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n @for (item of column.lista; track $index) {\r\n <option [value]=\"item[column.keyCodigo]\"> {{ item[column.keyDescri]}} </option>\r\n }\r\n </select>\r\n </td>\r\n }\r\n\r\n @case ('stock') {\r\n <td class=\"b-table text-center\" [title]=\"row[column.fieldname] ? row[column.fieldname] : 'Sin Stock'\">\r\n @if (limpiarNumero(row[column.fieldname]) > 0) {\r\n {{row[column.fieldname]}}\r\n }@else {\r\n <i class=\"fas fa-times text-danger fw-bold fs-4\"></i>\r\n }\r\n </td>\r\n }\r\n\r\n @default {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <span [ngClass]=\"isLast ? 'cursor-pointer' : ''\"\r\n (click)=\"isLast ? column?.clic() : null\">{{row[column.fieldname]}}</span>\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", styles: ["thead{position:sticky;top:0;z-index:1}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.table-blank{--bs-table-bg-state: white !important}.header-normal{background:#cecece!important}.normal-table thead tr th{font-size:11px;text-align:start;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}.w-min{max-width:40px!important;width:40px!important;min-width:40px!important}.bg-red{background-color:red}.bg-red i,.bg-red span,.bg-red button,.bg-red td,.bg-red input,.bg-red select,.bg-red-input{color:red!important}.bg-blue{background-color:#00f}.bg-blue i,.bg-blue span,.bg-blue button,.bg-blue td,.bg-blue input,.bg-blue select,.bg-blue-input{color:#00f!important}.bg-yellow{background-color:#ff0}.bg-green{background-color:#adff2f}.bg-initial{background-color:initial}\n"] }]
|
|
3508
|
+
args: [{ selector: 'app-table-detalle', imports: [FormsModule, CommonModule, DecimalDirective, OnlyNumberDirective, NgbDropdownModule, ButtonComponent], providers: [DatePipe, DecimalPipe], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n</div>\r\n}\r\n<div class=\"table-container table-responsive\"\r\n [style.max-height]=\"altoContainer() ? 'calc(100vh - ' + altoContainer() + 'px)' : ''\"\r\n [style.max-height]=\"altoContainer()? 'calc(100vh - ' + altoContainer() + 'px)' : ''\">\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withCheckbox()) {\r\n <th scope=\"col\" class=\"text-center b-table w-min\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n </th>\r\n }\r\n\r\n @if (withEditItem()) {\r\n <th scope=\"col\" class=\"text-center b-table w-min\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n </th>\r\n }\r\n\r\n @if (customActions) {\r\n <th scope=\"col\" class=\"b-table w-min mwp-50\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\"></th>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.visible) {\r\n <th scope=\"col\" class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"widthDefault(column) + 'px'\" [style.min-width]=\"widthDefault(column) + 'px'\"\r\n [ngClass]=\"colorHeader()== 'normal' ? '' : 'header-normal'\">\r\n {{ column.caption }}\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of rowFilter(); track iRow; let iRow = $index) {\r\n @let isLast = validaAccionDescri(iRow);\r\n @let rowClass = getRowClass(row);\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n [class]=\"rowClass\" (click)=\"selectRow(identifier().length < 1 ? $index : row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table w-min\" [class]=\"rowClass\">\r\n @if(!resolveCell('checkbox', row)?.hidden){\r\n <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n [disabled]=\"!lastItemDisabled() ? false : validaLastRegistro($index)\"\r\n [checked]=\"isItemSelected($index)\" (change)=\"toogleItem($index, $event)\">\r\n }\r\n </td>\r\n }\r\n\r\n @if (withEditItem()) {\r\n <td scope=\"col\" class=\"text-start b-table w-min\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <i (click)=\"validaEdit(iRow) ? editItem.emit(row) : null \"\r\n class=\"fas fa-pen fs-7 px-2 py-2 my-1 rounded-2 text-secondary shadow-sm\"\r\n [ngClass]=\"validaEdit(iRow) ? 'cursor-pointer' : ''\" title=\"Editar articulo\"></i>\r\n </div>\r\n </td>\r\n }\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table w-min\">\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </div>\r\n </td>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.visible) {\r\n @switch (column.tipo) {\r\n\r\n @case ('input-radio') {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <input type=\"radio\" class=\"form-check-input fs-8 border border-secondary m-0 p-0\"\r\n [disabled]=\"lastItemDisabled() && validaLastRegistro(iRow)\" [checked]=\"selectedRadio() === iRow\"\r\n (change)=\"clickRadio(iRow)\">\r\n </td>\r\n }\r\n\r\n @case ('fecha') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n {{ row[column.fieldname] | date:'dd/MM/yyyy' }}\r\n </td>\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\" [title]=\"limpiarNumero(row[column.fieldname]) | number:'1.2-2'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n {{limpiarNumero(row[column.fieldname]) | number:'1.2-2'}}\r\n </td>\r\n }\r\n\r\n @case ('list-select') {\r\n <td class=\"text-center b-table\" [title]=\"row[column.fieldname]\">\r\n <div ngbDropdown class=\"d-inline-block\" container=\"body\">\r\n <div class=\"h-100 bg-sidebar d-flex align-items-center px-1\">\r\n <button [disabled]=\"!isLast\" class=\"border-0 bg-none\"\r\n [ngClass]=\"!isLast ? 'text-muted' : 'text-input'\" ngbDropdownToggle>\r\n {{row[column.fieldname]}}\r\n </button>\r\n </div>\r\n <div ngbDropdownMenu class=\"my-0 py-0\">\r\n @for (item of column.lista; track $index; let last = $last) {\r\n <app-button [texto]=\"item.text\"\r\n [extraClass]=\"($index == 0 ? 'border-top-radius ' : '') + (last ? 'border-bottom-radius' : '')\"\r\n [dropdownButton]=\"true\" (accion)=\"item?.action(row,item.codigo)\" />\r\n }\r\n </div>\r\n </div>\r\n <!-- <app-dropdown-menu [options]=\"column.lista\" [disabled]=\"lastItemDisabled() ? false : !validaLastRegistro($index)\" [buttonProperties]=\"{color:'none',texto:row[column.fieldname]}\"/> -->\r\n </td>\r\n\r\n }\r\n\r\n @case ('input') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n (focus)=\"focusData(row[column.fieldname])\"\r\n (blur)=\"!validarData(row[column.fieldname]) ? null : column?.blur(row)\"\r\n (keyup.enter)=\"!validarData(row[column.fieldname]) ? null : column?.enter(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n </td>\r\n }\r\n\r\n @case ('input-date') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"date\" class=\"form-control\" [(ngModel)]=\"row[column.fieldname]\"\r\n (blur)=\"column?.blur(row)\" (keyup.enter)=\"column?.enter(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n </td>\r\n }\r\n\r\n @case ('input-etiqueta') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"etiqueta\" [withDetails]=\"true\"\r\n [(valuedes)]=\"row[column.fieldname]\" [(disabled)]=\"row.disabledEtiqueta\"\r\n [auxiliarData]=\"{tipinv:row.tipinv,codart:row.codart,codtit:row.codtit,codalm:row.codalm}\"\r\n (emitirAdicionalData)=\"manejarDataEtiqueta($event,row)\"\r\n (disabledChange)=\"limpiarEtiqueta($event,row)\" [withBuscar2]=\"true\"\r\n [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n </td>\r\n }\r\n\r\n @case ('input-afecta') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <!-- <app-doble-input-buscar [oneinput]=\"true\" type=\"tafecta\" [(valuecod)]=\"row[column.fieldname]\"\r\n [(disabled)]=\"row.disabledEtiqueta\" [(valuedes)]=\"row.dtipafec\" viewInput=\"cod\"\r\n [withBuscar]=\"true\" [allDisabled]=\"row.disabledAll ?? false\" /> -->\r\n </td>\r\n }\r\n\r\n @case ('input-number') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control text-end\"\r\n [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n [disabled]=\"row.disabledAll ?? false\" onlyNumber>\r\n </td>\r\n }\r\n\r\n @case ('input-decimal') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <input type=\"text\" class=\"form-control text-end w-100\"\r\n [ngClass]=\"(!column.valida ? '' : (row[column.fieldname] ?? 0) <= 0 ? 'input-error' : '')\"\r\n [(ngModel)]=\"row[column.fieldname]\" (blur)=\"validarFunction(column.blur)?.(row)\"\r\n [appDecimal]=\"column.pipe\" [readonly]=\"column.readonly ? column.readonly(row) : false\"\r\n [disabled]=\"row.disabledAll ?? generateKeyDisabled(row,column)\" onlyNumber>\r\n </td>\r\n }\r\n\r\n @case ('input-select') {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <select class=\"form-select\" name=\"{{`cbo_lista_${row[column.fieldname]}`}}\"\r\n id=\"{{`cbo_lista_${row[column.fieldname]}`}}\" [(ngModel)]=\"row[column.fieldname]\"\r\n (change)=\"validarFunction(column.change)?.(row)\"\r\n [disabled]=\"column.disabled ? (typeof column.disabled === 'function' ? column.disabled(row) : column.disabled) : false\">\r\n @for (item of column.lista; track $index) {\r\n <option [value]=\"item[column.keyCodigo]\"> {{ item[column.keyDescri]}} </option>\r\n }\r\n </select>\r\n </td>\r\n }\r\n\r\n @case ('stock') {\r\n <td class=\"b-table text-center\" [title]=\"row[column.fieldname] ? row[column.fieldname] : 'Sin Stock'\">\r\n @if (limpiarNumero(row[column.fieldname]) > 0) {\r\n {{row[column.fieldname]}}\r\n }@else {\r\n <i class=\"fas fa-times text-danger fw-bold fs-4\"></i>\r\n }\r\n </td>\r\n }\r\n\r\n @default {\r\n <td class=\"b-table\" [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n <span [ngClass]=\"isLast ? 'cursor-pointer' : ''\"\r\n (click)=\"isLast ? column?.clic() : null\">{{row[column.fieldname]}}</span>\r\n </td>\r\n }\r\n }\r\n }\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", styles: ["thead{position:sticky;top:0;z-index:1}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.table-blank{--bs-table-bg-state: white !important}.header-normal{background:#cecece!important}.normal-table thead tr th{font-size:11px;text-align:start;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}.w-min{max-width:40px!important;width:40px!important;min-width:40px!important}.bg-red{background-color:red}.bg-red i,.bg-red span,.bg-red button,.bg-red td,.bg-red input,.bg-red select,.bg-red-input{color:red!important}.bg-blue{background-color:#00f}.bg-blue i,.bg-blue span,.bg-blue button,.bg-blue td,.bg-blue input,.bg-blue select,.bg-blue-input{color:#00f!important}.bg-yellow{background-color:#ff0}.bg-green{background-color:#adff2f}.bg-initial{background-color:initial}\n"] }]
|
|
3507
3509
|
}], propDecorators: { customActions: [{
|
|
3508
3510
|
type: ContentChild,
|
|
3509
3511
|
args: ['customActions', { static: false }]
|
|
@@ -3618,12 +3620,12 @@ class TableSimpleComponent {
|
|
|
3618
3620
|
const r = this.rendered().find(r => r.matches(col, value, row));
|
|
3619
3621
|
return r ? r.render(value, row) : null;
|
|
3620
3622
|
}
|
|
3621
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3622
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
3623
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3624
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TableSimpleComponent, isStandalone: true, selector: "app-table-simple", inputs: { withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, busqueda: { classPropertyName: "busqueda", publicName: "busqueda", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, withSelect: { classPropertyName: "withSelect", publicName: "withSelect", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { busqueda: "busquedaChange", selectedRow: "selectedRowChange", selected: "selected" }, providers: [DatePipe, DecimalPipe], queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n</div>\r\n}\r\n<div class=\"table-container table-responsive\" [style.max-height]=\"generateValueContainer()\"\r\n [style.height]=\"generateValueContainer()\">\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\"> \r\n @if (customActions) {\r\n <th scope=\"col\" class=\"width-50 mwp-50 b-table h-table\"></th>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.tipo !== 'mostrar' || column.condition()) {\r\n <th class=\"b-table h-table\" scope=\"col\" #thElement [title]=\"column.caption\" [style.width]=\"column.width + 'px'\"\r\n [style.min-width]=\"column.width + 'px'\">\r\n {{ column.caption }}\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); checkItem(row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n \r\n @for (column of columns(); track $index) {\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n\r\n }\r\n @else {\r\n\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td class=\"b-table\" [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy')\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n\r\n }\r\n\r\n @case ('situacion') {\r\n <td class=\"b-table\" [innerHTML]=\"getHighlight(row[column.fieldname])\" [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n\r\n </td>\r\n\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\" [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.2-2')\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.2-2'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname])\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"resolverItem.class\">{{ resolverItem.text }}</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 class=\"b-table\" [innerHTML]=\"getHighlight(row[column.fieldname])\" [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n\r\n </td>\r\n\r\n }\r\n }\r\n\r\n }\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", styles: ["thead{position:sticky;top:0;z-index:1}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:11px;text-align:start;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid rgb(226,226,226)}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.text-error{color:#d60000!important;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] });
|
|
3623
3625
|
}
|
|
3624
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableSimpleComponent, decorators: [{
|
|
3625
3627
|
type: Component,
|
|
3626
|
-
args: [{ selector: 'app-table-simple', imports: [FormsModule, CommonModule], providers: [DatePipe, DecimalPipe], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n</div>\r\n}\r\n<div class=\"table-container table-responsive\" [style.max-height]=\"generateValueContainer()\"\r\n [style.height]=\"generateValueContainer()\">\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\"> \r\n @if (customActions) {\r\n <th scope=\"col\" class=\"width-50 mwp-50 b-table h-table\"></th>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.tipo !== 'mostrar' || column.condition()) {\r\n <th class=\"b-table h-table\" scope=\"col\" #thElement [title]=\"column.caption\" [style.width]=\"column.width + 'px'\"\r\n [style.min-width]=\"column.width + 'px'\">\r\n {{ column.caption }}\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); checkItem(row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n \r\n @for (column of columns(); track $index) {\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n\r\n }\r\n @else {\r\n\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td class=\"b-table\" [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy')\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n\r\n }\r\n\r\n @case ('situacion') {\r\n <td class=\"b-table\" [innerHTML]=\"getHighlight(row[column.fieldname])\" [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n\r\n </td>\r\n\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\" [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.2-2')\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.2-2'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname])\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"resolverItem.class\">{{ resolverItem.text }}</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 class=\"b-table\" [innerHTML]=\"getHighlight(row[column.fieldname])\" [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n\r\n </td>\r\n\r\n }\r\n }\r\n\r\n }\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", styles: ["thead{position:sticky;top:0;z-index:1}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:11px;text-align:start;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid rgb(226,226,226)}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media
|
|
3628
|
+
args: [{ selector: 'app-table-simple', imports: [FormsModule, CommonModule], providers: [DatePipe, DecimalPipe], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label for=\"\" class=\"form-label me-2 pt-2\">Buscar:</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n</div>\r\n}\r\n<div class=\"table-container table-responsive\" [style.max-height]=\"generateValueContainer()\"\r\n [style.height]=\"generateValueContainer()\">\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n <thead>\r\n <tr class=\"shadow-sm\"> \r\n @if (customActions) {\r\n <th scope=\"col\" class=\"width-50 mwp-50 b-table h-table\"></th>\r\n }\r\n\r\n @for (column of columns(); track $index) {\r\n @if (column.tipo !== 'mostrar' || column.condition()) {\r\n <th class=\"b-table h-table\" scope=\"col\" #thElement [title]=\"column.caption\" [style.width]=\"column.width + 'px'\"\r\n [style.min-width]=\"column.width + 'px'\">\r\n {{ column.caption }}\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n @for (row of rowFilter(); track $index) {\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); checkItem(row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n\r\n\r\n @if (customActions) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container *ngTemplateOutlet=\"customActions; context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n \r\n @for (column of columns(); track $index) {\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n\r\n }\r\n @else {\r\n\r\n @switch (column.tipo) {\r\n @case ('fecha') {\r\n <td class=\"b-table\" [innerHTML]=\"getHighlight(row[column.fieldname] | date:'dd/MM/yyyy')\"\r\n [title]=\"row[column.fieldname] | date:'dd/MM/yyyy'\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n\r\n }\r\n\r\n @case ('situacion') {\r\n <td class=\"b-table\" [innerHTML]=\"getHighlight(row[column.fieldname])\" [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n\r\n </td>\r\n\r\n }\r\n\r\n @case ('decimal') {\r\n <td class=\"text-end b-table\" [innerHTML]=\"getHighlight((row[column.fieldname] ?? 0) | number:'1.2-2')\"\r\n [title]=\"(row[column.fieldname] ?? 0) | number:'1.2-2'\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('text-center') {\r\n <td class=\"text-center b-table\" [innerHTML]=\"getHighlight(row[column.fieldname])\"\r\n [title]=\"row[column.fieldname]\" [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n </td>\r\n }\r\n\r\n @case ('check') {\r\n <td class=\"text-center b-table\" [title]=\"checkString[row[column.fieldname]]\">\r\n <i class=\"fs-5\"\r\n [ngClass]=\"row[column.fieldname] == 'S'?'fas fa-check yes-icon':'fas fa-times no-icon'\"></i>\r\n </td>\r\n }\r\n\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"resolverItem.class\">{{ resolverItem.text }}</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 class=\"b-table\" [innerHTML]=\"getHighlight(row[column.fieldname])\" [title]=\"row[column.fieldname]\"\r\n [ngClass]=\"row.situac == 'J' ? 'text-error':''\">\r\n\r\n </td>\r\n\r\n }\r\n }\r\n\r\n }\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n </table>\r\n</div>", styles: ["thead{position:sticky;top:0;z-index:1}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:11px;text-align:start;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid rgb(226,226,226)}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.text-error{color:#d60000!important;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}\n"] }]
|
|
3627
3629
|
}], propDecorators: { customActions: [{
|
|
3628
3630
|
type: ContentChild,
|
|
3629
3631
|
args: ['customActions', { static: false }]
|
|
@@ -3632,10 +3634,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
3632
3634
|
class TsiColumnDefDirective {
|
|
3633
3635
|
fieldname = input.required({ alias: 'tsiColumn' });
|
|
3634
3636
|
template = inject((TemplateRef));
|
|
3635
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3636
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.
|
|
3637
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TsiColumnDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3638
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.25", type: TsiColumnDefDirective, isStandalone: true, selector: "[tsiColumn]", inputs: { fieldname: { classPropertyName: "fieldname", publicName: "tsiColumn", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
3637
3639
|
}
|
|
3638
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TsiColumnDefDirective, decorators: [{
|
|
3639
3641
|
type: Directive,
|
|
3640
3642
|
args: [{
|
|
3641
3643
|
selector: '[tsiColumn]',
|
|
@@ -3675,10 +3677,10 @@ class FormateadorService {
|
|
|
3675
3677
|
return { ...nuevoItem, _format: formatted };
|
|
3676
3678
|
});
|
|
3677
3679
|
}
|
|
3678
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
3679
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
3680
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormateadorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3681
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormateadorService, providedIn: 'root' });
|
|
3680
3682
|
}
|
|
3681
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
3683
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormateadorService, decorators: [{
|
|
3682
3684
|
type: Injectable,
|
|
3683
3685
|
args: [{
|
|
3684
3686
|
providedIn: 'root'
|
|
@@ -3736,7 +3738,7 @@ class TableUltimateComponent {
|
|
|
3736
3738
|
selectItems = model([]);
|
|
3737
3739
|
rowFormat = computed(() => this.formateador.procesarLista(this.rows(), this.columns()));
|
|
3738
3740
|
// ── Estado interno ───────────────────────────────────────────────────────────
|
|
3739
|
-
busqueda =
|
|
3741
|
+
busqueda = model('');
|
|
3740
3742
|
scrollTop = signal(0);
|
|
3741
3743
|
containerHeight = signal(0); // altura real medida del DOM
|
|
3742
3744
|
// ── Sort ─────────────────────────────────────────────────────────────────────
|
|
@@ -3859,9 +3861,9 @@ class TableUltimateComponent {
|
|
|
3859
3861
|
}
|
|
3860
3862
|
return this.selectedRow() == this.concatenarValue(row, this.identifier());
|
|
3861
3863
|
}
|
|
3862
|
-
textoDigitado(
|
|
3863
|
-
const val = event.target.value;
|
|
3864
|
-
this.busqueda.set(val);
|
|
3864
|
+
textoDigitado() {
|
|
3865
|
+
// const val = (event.target as HTMLInputElement).value;
|
|
3866
|
+
// this.busqueda.set(val);
|
|
3865
3867
|
this.scrollTop.set(0);
|
|
3866
3868
|
if (this.scrollContainer()?.nativeElement) {
|
|
3867
3869
|
this.scrollContainer().nativeElement.scrollTop = 0;
|
|
@@ -4146,14 +4148,14 @@ class TableUltimateComponent {
|
|
|
4146
4148
|
}
|
|
4147
4149
|
}
|
|
4148
4150
|
getRows = () => this.rowFormat().map(({ idListTsi, format, ...rest }) => rest);
|
|
4149
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4150
|
-
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 }, variante: { classPropertyName: "variante", publicName: "variante", 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 }, classTotales: { classPropertyName: "classTotales", publicName: "classTotales", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEvent: "rowEvent", selectedRow: "selectedRowChange", selectItems: "selectItemsChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.ll-variant--modern": "variante() === \"modern\"" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }, { propertyName: "columnDefs", predicate: TsiColumnDefDirective, 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\" placeholder=\"Buscar...\" [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.fieldname) {\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.fieldname }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\r\n for=\"{{ 'filter_' + col.fieldname }}\">\r\n {{ col.caption || col.fieldname }}\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\"\r\n [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 icon-table\">\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 d-flex align-items-baseline justify-content-between\">\r\n <span>Columnas</span>\r\n <span class=\"column-config-hint\">arrastra para ordenar</span>\r\n </div>\r\n\r\n <div cdkDropList class=\"column-config-list\" (cdkDropListDropped)=\"onColumnDrop($event)\">\r\n @for (col of columnasConfigurables(); track col.fieldname) {\r\n <div class=\"column-config-row\" cdkDrag>\r\n <i class=\"fas fa-grip-vertical column-config-grip\" cdkDragHandle></i>\r\n <div class=\"form-check form-switch text-start d-flex align-items-center mb-0 flex-grow-1\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.fieldname }}\"\r\n [checked]=\"isColumnVisible(col.fieldname)\"\r\n (change)=\"toggleColumnVisible(col.fieldname, $event)\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.fieldname }}\">\r\n {{ col.caption || col.fieldname }}\r\n </label>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"column-config-footer\">\r\n <!-- <button type=\"button\" class=\"btn btn-link btn-sm p-0 text-secondary fs-7\"\r\n (click)=\"restablecerConfiguracionColumnas()\">\r\n Restablecer\r\n </button> -->\r\n <button type=\"button\" class=\"btn btn-sm fs-7 column-config-save\"\r\n (click)=\"guardarConfiguracionColumnas()\">\r\n Guardar configuraci\u00F3n\r\n </button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n\r\n @for (col of columnasRenderizadas(); track col.fieldname) {\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]=\"col.caption\" (click)=\"col.caption && toggleSort(col.fieldname)\">\r\n <span class=\"ll-th-content\">\r\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n @if (col.caption) {\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 }\r\n </span>\r\n </th>\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]=\"columnasRenderizadas().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)\"\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 columnasRenderizadas(); track col.fieldname) {\r\n @if (columnDefMap().has(col.fieldname)) {\r\n <td>\r\n <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col }\">\r\n </ng-container>\r\n </td>\r\n } @else 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 </tr>\r\n\r\n @if (idList == expandedRows()) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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=\"{{classTotales()}} fw-5 fs-6 ps-2 py-2\">Totales:</td>\r\n @for (col of columnasRenderizadas() ; track col.fieldname) {\r\n @if (col.totalizable) {\r\n <td class=\"{{classTotales()}} 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: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);padding:12px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-sort-idle{opacity:.4;color:#1e293b}:host(.ll-variant--modern) .icon-table{color:#5e5959!important;font-size:12px!important}:host(.ll-variant--modern) .ll-row{transition:background-color .1s ease}:host(.ll-variant--modern) .ll-row:nth-child(odd){background-color:#fff}:host(.ll-variant--modern) .ll-row:nth-child(2n){background-color:#f0f0f0}:host(.ll-variant--modern) .ll-row:hover:not(.ll-row--selected){background-color:#ebebeb!important}:host(.ll-variant--modern) .ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important;box-shadow:inset 4px 0 #334155}:host(.ll-variant--modern) .ll-row--drag-over{background-color:#5b8dee14!important;outline:2px dashed rgba(91,141,238,.5);outline-offset:-2px}:host(.ll-variant--modern) .ll-row td{border-left:none;border-right:none;border-top:none;border-bottom:1px solid rgba(0,0,0,.1);height:40px}:host(.ll-variant--modern) .ll-row td:hover{background-color:#292a2c09!important;border-bottom:1px solid rgb(133,133,133)}:host(.ll-variant--modern) .ll-tfoot tr td:first-child{border-bottom-left-radius:10px}:host(.ll-variant--modern) .ll-tfoot tr td:last-child{border-bottom-right-radius:10px}:host(.ll-variant--modern) .ll-tfoot .ll-footer-cell{background-color:var(--background-card);color:var(--text-color);border:none;border-top:1px solid rgba(0,0,0,.08);padding:10px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-empty{padding:28px;color:#9ca3af;font-size:13px}.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;right:auto;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:min(500px,80vh);width:min(400px,100vw - 2rem);max-width:calc(80vw - 2rem);overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.6rem .75rem;border-bottom:1px solid #c4c4c4;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}.column-config-hint{font-size:10px;font-weight:400;text-transform:none;color:#9aa3ac}.column-config-list{display:flex;flex-direction:column;gap:3px;padding:4px 0 2px}.column-config-row{display:flex;align-items:center;gap:8px;padding:4px 6px;background:#fff;border:1px solid transparent;border-radius:6px;transition:background-color .15s ease,border-color .15s ease}.column-config-row:hover{background:#f6f7f8}.column-config-grip{cursor:grab;color:#adb5bd;font-size:13px;flex:none}.column-config-grip:active{cursor:grabbing}.column-config-row.cdk-drag-preview{box-shadow:0 10px 24px -8px #00000059;border:1px solid #e5e5e5;border-radius:6px;background:#fff;transform:rotate(-1.5deg)}.column-config-row.cdk-drag-placeholder{border:1.5px dashed #6c757d;border-radius:6px;background:#f1f3f5;opacity:.7}.column-config-row.cdk-drag-placeholder *{visibility:hidden}.column-config-list.cdk-drop-list-dragging .column-config-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.column-config-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;bottom:0;background:#fff;border-top:1px solid #e5e5e5;margin:6px -.75rem 0;padding:8px .75rem}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.column-config-save{border-radius:6px;border:1px solid rgba(0,0,0,.12);background-color:#fff;color:#272727;padding:4px 12px;box-shadow:0 1px 2px #0000000f;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.column-config-save:hover{background-color:#334155;border-color:#0003;color:#fff;box-shadow:0 2px 6px #00000026}.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], animations: [fadeInOut, dropdownAnimation] });
|
|
4151
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableUltimateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", 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 }, variante: { classPropertyName: "variante", publicName: "variante", 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 }, busqueda: { classPropertyName: "busqueda", publicName: "busqueda", isSignal: true, isRequired: false, transformFunction: null }, classTotales: { classPropertyName: "classTotales", publicName: "classTotales", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEvent: "rowEvent", selectedRow: "selectedRowChange", selectItems: "selectItemsChange", busqueda: "busquedaChange" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "class.ll-variant--modern": "variante() === \"modern\"" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }, { propertyName: "columnDefs", predicate: TsiColumnDefDirective, 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\" placeholder=\"Buscar...\" [(ngModel)]=\"busqueda\" (input)=\"textoDigitado()\" />\r\n <app-dropdown-cdk [altoContainer]=\"300\">\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 my-2\" @fadeInOut>\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.fieldname) {\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.fieldname }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\r\n for=\"{{ 'filter_' + col.fieldname }}\">\r\n {{ col.caption || col.fieldname }}\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\"\r\n [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 [altoContainer]=\"500\">\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0 icon-table\">\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 my-2\" @fadeInOut>\r\n <div class=\"popover-title fs-7 bg-white d-flex align-items-baseline justify-content-between\">\r\n <span>Columnas</span>\r\n <span class=\"column-config-hint\">arrastra para ordenar</span>\r\n </div>\r\n\r\n <div cdkDropList class=\"column-config-list\" (cdkDropListDropped)=\"onColumnDrop($event)\">\r\n @for (col of columnasConfigurables(); track col.fieldname) {\r\n <div class=\"column-config-row\" cdkDrag>\r\n <i class=\"fas fa-grip-vertical column-config-grip\" cdkDragHandle></i>\r\n <div class=\"form-check form-switch text-start d-flex align-items-center mb-0 flex-grow-1\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.fieldname }}\"\r\n [checked]=\"isColumnVisible(col.fieldname)\"\r\n (change)=\"toggleColumnVisible(col.fieldname, $event)\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.fieldname }}\">\r\n {{ col.caption || col.fieldname }}\r\n </label>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"column-config-footer\">\r\n <!-- <button type=\"button\" class=\"btn btn-link btn-sm p-0 text-secondary fs-7\"\r\n (click)=\"restablecerConfiguracionColumnas()\">\r\n Restablecer\r\n </button> -->\r\n <button type=\"button\" class=\"btn btn-sm fs-7 column-config-save\"\r\n (click)=\"guardarConfiguracionColumnas()\">\r\n Guardar configuraci\u00F3n\r\n </button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n\r\n @for (col of columnasRenderizadas(); track col.fieldname) {\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]=\"col.caption\" (click)=\"col.caption && toggleSort(col.fieldname)\">\r\n <span class=\"ll-th-content\">\r\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n @if (col.caption) {\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 }\r\n </span>\r\n </th>\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]=\"columnasRenderizadas().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)\"\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 columnasRenderizadas(); track col.fieldname) {\r\n @if (columnDefMap().has(col.fieldname)) {\r\n <td>\r\n <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col }\">\r\n </ng-container>\r\n </td>\r\n } @else 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 </tr>\r\n\r\n @if (idList == expandedRows()) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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=\"{{classTotales()}} fw-5 fs-6 ps-2 py-2\">Totales:</td>\r\n @for (col of columnasRenderizadas() ; track col.fieldname) {\r\n @if (col.totalizable) {\r\n <td class=\"{{classTotales()}} 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: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);padding:12px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-sort-idle{opacity:.4;color:#1e293b}:host(.ll-variant--modern) .icon-table{color:#5e5959!important;font-size:12px!important}:host(.ll-variant--modern) .ll-row{transition:background-color .1s ease}:host(.ll-variant--modern) .ll-row:nth-child(odd){background-color:#fff}:host(.ll-variant--modern) .ll-row:nth-child(2n){background-color:#f0f0f0}:host(.ll-variant--modern) .ll-row:hover:not(.ll-row--selected){background-color:#ebebeb!important}:host(.ll-variant--modern) .ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important;box-shadow:inset 4px 0 #334155}:host(.ll-variant--modern) .ll-row--drag-over{background-color:#5b8dee14!important;outline:2px dashed rgba(91,141,238,.5);outline-offset:-2px}:host(.ll-variant--modern) .ll-row td{border-left:none;border-right:none;border-top:none;border-bottom:1px solid rgba(0,0,0,.1);height:40px}:host(.ll-variant--modern) .ll-row td:hover{background-color:#292a2c09!important;border-bottom:1px solid rgb(133,133,133)}:host(.ll-variant--modern) .ll-tfoot tr td:first-child{border-bottom-left-radius:10px}:host(.ll-variant--modern) .ll-tfoot tr td:last-child{border-bottom-right-radius:10px}:host(.ll-variant--modern) .ll-tfoot .ll-footer-cell{background-color:var(--background-card);color:var(--text-color);border:none;border-top:1px solid rgba(0,0,0,.08);padding:10px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-empty{padding:28px;color:#9ca3af;font-size:13px}.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{border-radius:.375rem;padding:0rem .75rem;display:block;max-height:min(500px,80vh);width:min(400px,100vw - 2rem);max-width:calc(80vw - 2rem);overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.6rem .75rem;border-bottom:1px solid #c4c4c4;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}.column-config-hint{font-size:10px;font-weight:400;text-transform:none;color:#9aa3ac}.column-config-list{display:flex;flex-direction:column;gap:3px;padding:4px 0 2px}.column-config-row{display:flex;align-items:center;gap:8px;padding:4px 6px;background:#fff;border:1px solid transparent;border-radius:6px;transition:background-color .15s ease,border-color .15s ease}.column-config-row:hover{background:#f6f7f8}.column-config-grip{cursor:grab;color:#adb5bd;font-size:13px;flex:none}.column-config-grip:active{cursor:grabbing}.column-config-row.cdk-drag-preview{box-shadow:0 10px 24px -8px #00000059;border:1px solid #e5e5e5;border-radius:6px;background:#fff;transform:rotate(-1.5deg)}.column-config-row.cdk-drag-placeholder{border:1.5px dashed #6c757d;border-radius:6px;background:#f1f3f5;opacity:.7}.column-config-row.cdk-drag-placeholder *{visibility:hidden}.column-config-list.cdk-drop-list-dragging .column-config-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.column-config-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;bottom:0;background:#fff;border-top:1px solid #e5e5e5;margin:6px -.75rem 0;padding:8px .75rem}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.column-config-save{border-radius:6px;border:1px solid rgba(0,0,0,.12);background-color:#fff;color:#272727;padding:4px 12px;box-shadow:0 1px 2px #0000000f;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.column-config-save:hover{background-color:#334155;border-color:#0003;color:#fff;box-shadow:0 2px 6px #00000026}.popover-menu-filter{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$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], animations: [fadeInOut, dropdownAnimation] });
|
|
4151
4153
|
}
|
|
4152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableUltimateComponent, decorators: [{
|
|
4153
4155
|
type: Component,
|
|
4154
4156
|
args: [{ selector: 'app-table-ultimate', imports: [FormsModule, CommonModule, DropdownCdkComponent, AnimatedCheckboxDirective, CardMobileComponent, NgTemplateOutlet, CdkDropList, CdkDrag, CdkDragHandle], animations: [fadeInOut, dropdownAnimation], host: {
|
|
4155
4157
|
'[class.ll-variant--modern]': 'variante() === "modern"'
|
|
4156
|
-
}, 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\" placeholder=\"Buscar...\" [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.fieldname) {\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.fieldname }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\r\n for=\"{{ 'filter_' + col.fieldname }}\">\r\n {{ col.caption || col.fieldname }}\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\"\r\n [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 icon-table\">\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 d-flex align-items-baseline justify-content-between\">\r\n <span>Columnas</span>\r\n <span class=\"column-config-hint\">arrastra para ordenar</span>\r\n </div>\r\n\r\n <div cdkDropList class=\"column-config-list\" (cdkDropListDropped)=\"onColumnDrop($event)\">\r\n @for (col of columnasConfigurables(); track col.fieldname) {\r\n <div class=\"column-config-row\" cdkDrag>\r\n <i class=\"fas fa-grip-vertical column-config-grip\" cdkDragHandle></i>\r\n <div class=\"form-check form-switch text-start d-flex align-items-center mb-0 flex-grow-1\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.fieldname }}\"\r\n [checked]=\"isColumnVisible(col.fieldname)\"\r\n (change)=\"toggleColumnVisible(col.fieldname, $event)\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.fieldname }}\">\r\n {{ col.caption || col.fieldname }}\r\n </label>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"column-config-footer\">\r\n <!-- <button type=\"button\" class=\"btn btn-link btn-sm p-0 text-secondary fs-7\"\r\n (click)=\"restablecerConfiguracionColumnas()\">\r\n Restablecer\r\n </button> -->\r\n <button type=\"button\" class=\"btn btn-sm fs-7 column-config-save\"\r\n (click)=\"guardarConfiguracionColumnas()\">\r\n Guardar configuraci\u00F3n\r\n </button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n\r\n @for (col of columnasRenderizadas(); track col.fieldname) {\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]=\"col.caption\" (click)=\"col.caption && toggleSort(col.fieldname)\">\r\n <span class=\"ll-th-content\">\r\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n @if (col.caption) {\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 }\r\n </span>\r\n </th>\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]=\"columnasRenderizadas().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)\"\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 columnasRenderizadas(); track col.fieldname) {\r\n @if (columnDefMap().has(col.fieldname)) {\r\n <td>\r\n <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col }\">\r\n </ng-container>\r\n </td>\r\n } @else 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 </tr>\r\n\r\n @if (idList == expandedRows()) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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=\"{{classTotales()}} fw-5 fs-6 ps-2 py-2\">Totales:</td>\r\n @for (col of columnasRenderizadas() ; track col.fieldname) {\r\n @if (col.totalizable) {\r\n <td class=\"{{classTotales()}} 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: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);padding:12px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-sort-idle{opacity:.4;color:#1e293b}:host(.ll-variant--modern) .icon-table{color:#5e5959!important;font-size:12px!important}:host(.ll-variant--modern) .ll-row{transition:background-color .1s ease}:host(.ll-variant--modern) .ll-row:nth-child(odd){background-color:#fff}:host(.ll-variant--modern) .ll-row:nth-child(2n){background-color:#f0f0f0}:host(.ll-variant--modern) .ll-row:hover:not(.ll-row--selected){background-color:#ebebeb!important}:host(.ll-variant--modern) .ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important;box-shadow:inset 4px 0 #334155}:host(.ll-variant--modern) .ll-row--drag-over{background-color:#5b8dee14!important;outline:2px dashed rgba(91,141,238,.5);outline-offset:-2px}:host(.ll-variant--modern) .ll-row td{border-left:none;border-right:none;border-top:none;border-bottom:1px solid rgba(0,0,0,.1);height:40px}:host(.ll-variant--modern) .ll-row td:hover{background-color:#292a2c09!important;border-bottom:1px solid rgb(133,133,133)}:host(.ll-variant--modern) .ll-tfoot tr td:first-child{border-bottom-left-radius:10px}:host(.ll-variant--modern) .ll-tfoot tr td:last-child{border-bottom-right-radius:10px}:host(.ll-variant--modern) .ll-tfoot .ll-footer-cell{background-color:var(--background-card);color:var(--text-color);border:none;border-top:1px solid rgba(0,0,0,.08);padding:10px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-empty{padding:28px;color:#9ca3af;font-size:13px}.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;right:auto;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:min(500px,80vh);width:min(400px,100vw - 2rem);max-width:calc(80vw - 2rem);overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.6rem .75rem;border-bottom:1px solid #c4c4c4;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}.column-config-hint{font-size:10px;font-weight:400;text-transform:none;color:#9aa3ac}.column-config-list{display:flex;flex-direction:column;gap:3px;padding:4px 0 2px}.column-config-row{display:flex;align-items:center;gap:8px;padding:4px 6px;background:#fff;border:1px solid transparent;border-radius:6px;transition:background-color .15s ease,border-color .15s ease}.column-config-row:hover{background:#f6f7f8}.column-config-grip{cursor:grab;color:#adb5bd;font-size:13px;flex:none}.column-config-grip:active{cursor:grabbing}.column-config-row.cdk-drag-preview{box-shadow:0 10px 24px -8px #00000059;border:1px solid #e5e5e5;border-radius:6px;background:#fff;transform:rotate(-1.5deg)}.column-config-row.cdk-drag-placeholder{border:1.5px dashed #6c757d;border-radius:6px;background:#f1f3f5;opacity:.7}.column-config-row.cdk-drag-placeholder *{visibility:hidden}.column-config-list.cdk-drop-list-dragging .column-config-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.column-config-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;bottom:0;background:#fff;border-top:1px solid #e5e5e5;margin:6px -.75rem 0;padding:8px .75rem}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.column-config-save{border-radius:6px;border:1px solid rgba(0,0,0,.12);background-color:#fff;color:#272727;padding:4px 12px;box-shadow:0 1px 2px #0000000f;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.column-config-save:hover{background-color:#334155;border-color:#0003;color:#fff;box-shadow:0 2px 6px #00000026}.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"] }]
|
|
4158
|
+
}, 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\" placeholder=\"Buscar...\" [(ngModel)]=\"busqueda\" (input)=\"textoDigitado()\" />\r\n <app-dropdown-cdk [altoContainer]=\"300\">\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 my-2\" @fadeInOut>\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.fieldname) {\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.fieldname }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\r\n for=\"{{ 'filter_' + col.fieldname }}\">\r\n {{ col.caption || col.fieldname }}\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\"\r\n [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 [altoContainer]=\"500\">\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0 icon-table\">\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 my-2\" @fadeInOut>\r\n <div class=\"popover-title fs-7 bg-white d-flex align-items-baseline justify-content-between\">\r\n <span>Columnas</span>\r\n <span class=\"column-config-hint\">arrastra para ordenar</span>\r\n </div>\r\n\r\n <div cdkDropList class=\"column-config-list\" (cdkDropListDropped)=\"onColumnDrop($event)\">\r\n @for (col of columnasConfigurables(); track col.fieldname) {\r\n <div class=\"column-config-row\" cdkDrag>\r\n <i class=\"fas fa-grip-vertical column-config-grip\" cdkDragHandle></i>\r\n <div class=\"form-check form-switch text-start d-flex align-items-center mb-0 flex-grow-1\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.fieldname }}\"\r\n [checked]=\"isColumnVisible(col.fieldname)\"\r\n (change)=\"toggleColumnVisible(col.fieldname, $event)\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.fieldname }}\">\r\n {{ col.caption || col.fieldname }}\r\n </label>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"column-config-footer\">\r\n <!-- <button type=\"button\" class=\"btn btn-link btn-sm p-0 text-secondary fs-7\"\r\n (click)=\"restablecerConfiguracionColumnas()\">\r\n Restablecer\r\n </button> -->\r\n <button type=\"button\" class=\"btn btn-sm fs-7 column-config-save\"\r\n (click)=\"guardarConfiguracionColumnas()\">\r\n Guardar configuraci\u00F3n\r\n </button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n\r\n @for (col of columnasRenderizadas(); track col.fieldname) {\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]=\"col.caption\" (click)=\"col.caption && toggleSort(col.fieldname)\">\r\n <span class=\"ll-th-content\">\r\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\r\n @if (col.caption) {\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 }\r\n </span>\r\n </th>\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]=\"columnasRenderizadas().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)\"\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 columnasRenderizadas(); track col.fieldname) {\r\n @if (columnDefMap().has(col.fieldname)) {\r\n <td>\r\n <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col }\">\r\n </ng-container>\r\n </td>\r\n } @else 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 </tr>\r\n\r\n @if (idList == expandedRows()) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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]=\"columnasRenderizadas().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=\"{{classTotales()}} fw-5 fs-6 ps-2 py-2\">Totales:</td>\r\n @for (col of columnasRenderizadas() ; track col.fieldname) {\r\n @if (col.totalizable) {\r\n <td class=\"{{classTotales()}} 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: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);padding:12px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-sort-idle{opacity:.4;color:#1e293b}:host(.ll-variant--modern) .icon-table{color:#5e5959!important;font-size:12px!important}:host(.ll-variant--modern) .ll-row{transition:background-color .1s ease}:host(.ll-variant--modern) .ll-row:nth-child(odd){background-color:#fff}:host(.ll-variant--modern) .ll-row:nth-child(2n){background-color:#f0f0f0}:host(.ll-variant--modern) .ll-row:hover:not(.ll-row--selected){background-color:#ebebeb!important}:host(.ll-variant--modern) .ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important;box-shadow:inset 4px 0 #334155}:host(.ll-variant--modern) .ll-row--drag-over{background-color:#5b8dee14!important;outline:2px dashed rgba(91,141,238,.5);outline-offset:-2px}:host(.ll-variant--modern) .ll-row td{border-left:none;border-right:none;border-top:none;border-bottom:1px solid rgba(0,0,0,.1);height:40px}:host(.ll-variant--modern) .ll-row td:hover{background-color:#292a2c09!important;border-bottom:1px solid rgb(133,133,133)}:host(.ll-variant--modern) .ll-tfoot tr td:first-child{border-bottom-left-radius:10px}:host(.ll-variant--modern) .ll-tfoot tr td:last-child{border-bottom-right-radius:10px}:host(.ll-variant--modern) .ll-tfoot .ll-footer-cell{background-color:var(--background-card);color:var(--text-color);border:none;border-top:1px solid rgba(0,0,0,.08);padding:10px 14px;box-shadow:none}:host(.ll-variant--modern) .ll-empty{padding:28px;color:#9ca3af;font-size:13px}.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{border-radius:.375rem;padding:0rem .75rem;display:block;max-height:min(500px,80vh);width:min(400px,100vw - 2rem);max-width:calc(80vw - 2rem);overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.6rem .75rem;border-bottom:1px solid #c4c4c4;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}.column-config-hint{font-size:10px;font-weight:400;text-transform:none;color:#9aa3ac}.column-config-list{display:flex;flex-direction:column;gap:3px;padding:4px 0 2px}.column-config-row{display:flex;align-items:center;gap:8px;padding:4px 6px;background:#fff;border:1px solid transparent;border-radius:6px;transition:background-color .15s ease,border-color .15s ease}.column-config-row:hover{background:#f6f7f8}.column-config-grip{cursor:grab;color:#adb5bd;font-size:13px;flex:none}.column-config-grip:active{cursor:grabbing}.column-config-row.cdk-drag-preview{box-shadow:0 10px 24px -8px #00000059;border:1px solid #e5e5e5;border-radius:6px;background:#fff;transform:rotate(-1.5deg)}.column-config-row.cdk-drag-placeholder{border:1.5px dashed #6c757d;border-radius:6px;background:#f1f3f5;opacity:.7}.column-config-row.cdk-drag-placeholder *{visibility:hidden}.column-config-list.cdk-drop-list-dragging .column-config-row:not(.cdk-drag-placeholder){transition:transform .2s cubic-bezier(0,0,.2,1)}.column-config-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;bottom:0;background:#fff;border-top:1px solid #e5e5e5;margin:6px -.75rem 0;padding:8px .75rem}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.column-config-save{border-radius:6px;border:1px solid rgba(0,0,0,.12);background-color:#fff;color:#272727;padding:4px 12px;box-shadow:0 1px 2px #0000000f;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.column-config-save:hover{background-color:#334155;border-color:#0003;color:#fff;box-shadow:0 2px 6px #00000026}.popover-menu-filter{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"] }]
|
|
4157
4159
|
}], propDecorators: { onResize: [{
|
|
4158
4160
|
type: HostListener,
|
|
4159
4161
|
args: ['window:resize', ['$event']]
|
|
@@ -4621,14 +4623,14 @@ class TableUltimatePivotComponent {
|
|
|
4621
4623
|
concatenarValue(obj, fields) {
|
|
4622
4624
|
return fields.reduce((acc, f) => acc + (obj[f] ?? ''), '');
|
|
4623
4625
|
}
|
|
4624
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4625
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimatePivotComponent, isStandalone: true, selector: "app-table-ultimate-pivot", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", 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 }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, maxLevels: { classPropertyName: "maxLevels", publicName: "maxLevels", isSignal: true, isRequired: false, transformFunction: null }, hasChildrenKey: { classPropertyName: "hasChildrenKey", publicName: "hasChildrenKey", isSignal: true, isRequired: false, transformFunction: null }, customLevels: { classPropertyName: "customLevels", publicName: "customLevels", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, expandOn: { classPropertyName: "expandOn", publicName: "expandOn", isSignal: true, isRequired: false, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, withCellSelect: { classPropertyName: "withCellSelect", publicName: "withCellSelect", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, selectedCell: { classPropertyName: "selectedCell", publicName: "selectedCell", isSignal: true, isRequired: false, transformFunction: null }, loadingIds: { classPropertyName: "loadingIds", publicName: "loadingIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEvent: "rowEvent", cellEvent: "cellEvent", expandEvent: "expandEvent", selectedRow: "selectedRowChange", selectItems: "selectItemsChange", selectedCell: "selectedCellChange", loadingIds: "loadingIdsChange" }, host: { properties: { "class.ll-variant--modern": "variante() === \"modern\"" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }, { propertyName: "contentFilter", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "levelTemplate", first: true, predicate: ["levelTemplate"], descendants: true, isSignal: true }, { propertyName: "columnDefs", predicate: TsiColumnDefDirective, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\n<div class=\"ll-search-bar\">\n <div class=\"ll-search-bar__left\">\n <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\n </div>\n <div class=\"ll-search-bar__right\">\n <div class=\"ll-search-group\">\n <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\n <div class=\"ll-search-input-wrap\">\n <input type=\"text\" class=\"form-control cw-250\" placeholder=\"Buscar...\"\n [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\n <app-dropdown-cdk>\n <ng-template #trigger>\n <button class=\"btn btn-dark boton-buscar fs-7\">\n <i class=\"fas fa-cog\"></i>\n </button>\n </ng-template>\n <ng-template #content>\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\n <div class=\"popover-title fs-7 bg-white\">Filtros</div>\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\n (change)=\"toggleFiltros($event)\" id=\"filter_pv_todos\" />\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_pv_todos\">Todos</label>\n </div>\n @for (col of columns(); track col.caption) {\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n id=\"{{ 'filter_pv_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\n for=\"{{ 'filter_pv_' + col.caption }}\">{{ col.caption }}</label>\n </div>\n }\n </div>\n </ng-template>\n </app-dropdown-cdk>\n </div>\n </div>\n </div>\n</div>\n}\n\n<div #scrollContainer class=\"ll-scroll-container\"\n [style.height]=\"withHeight() ? heightStyle() : ''\"\n [style.max-height]=\"heightStyle()\"\n (scroll)=\"onScroll($event)\">\n <table class=\"ll-table\">\n\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\u2500 -->\n <thead class=\"ll-thead\">\n <tr>\n <!-- Columna de expansi\u00F3n: solo cuando no hay expandOn -->\n @if (!expandOn()) {\n <th class=\"ll-pivot-th-expand\"></th>\n }\n\n @if (withCheckbox()) {\n <th class=\"cw-20\">\n <label>\n <input type=\"checkbox\" name=\"chk_pv_all\" id=\"chk_pv_all\"\n animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\n </label>\n </th>\n }\n\n @if (customActions()) {\n <th class=\"cw-40\">\n <app-dropdown-cdk>\n <ng-template #trigger>\n <button class=\"btn p-0 d-flex mx-auto border-0 icon-table\"><i class=\"fas fa-cog\"></i></button>\n </ng-template>\n <ng-template #content>\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\n @for (col of columns(); track col.caption) {\n @if (col.caption) {\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n id=\"{{ 'switch_pv_' + col.caption }}\" [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\n for=\"{{ 'switch_pv_' + col.caption }}\">{{ col.caption }}</label>\n </div>\n }\n }\n </div>\n </ng-template>\n </app-dropdown-cdk>\n </th>\n }\n\n @for (col of columns(); track $index) {\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\n <th [title]=\"col.caption\" [style.width.px]=\"col.width || null\"\n [style.min-width.px]=\"col.width || null\" [style.max-width.px]=\"col.width || null\"\n class=\"ll-th-sortable\" (click)=\"toggleSort(col.fieldname)\">\n <span class=\"ll-th-content\">\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\n @if (sortField() === col.fieldname) {\n <i class=\"ms-1\"\n [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6' : 'fas fa-angle-down fs-6'\"></i>\n } @else {\n <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\n }\n </span>\n </th>\n }\n }\n </tr>\n </thead>\n\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\u2500\u2500 -->\n <tbody>\n <!-- Spacer superior -->\n @if (paddingTop() > 0) {\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\n <td [attr.colspan]=\"colSpan()\"></td>\n </tr>\n }\n\n <!-- Filas visibles -->\n @for (row of visibleRows(); track row.idListTsi) {\n @let idList = row.idListTsi;\n <tr class=\"ll-row\"\n [ngClass]=\"getLevelClass(row._level)\"\n [class.ll-row--selected]=\"isSelected(row, idList)\"\n (click)=\"selectRow(row, idList)\"\n (dblclick)=\"onDoubleClick(row)\"\n (contextmenu)=\"onRightClick($event, row)\">\n\n <!-- Celda dedicada de expansi\u00F3n: solo cuando no hay expandOn -->\n @if (!expandOn()) {\n <td class=\"ll-pivot-expand-cell\" [style.padding-left]=\"getIndentPx(row._level)\">\n @if (row._isLoading) {\n <span class=\"spinner-border spinner-border-sm ll-pivot-spinner\" role=\"status\"></span>\n } @else if (row._hasChildren && !customLevels().includes(row._level)) {\n <a class=\"ll-pivot-toggle text-dark cursor-pointer\" (click)=\"toggleExpand($event, row)\">\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"!row._isExpanded\"\n [class.fa-chevron-down]=\"row._isExpanded\"></i>\n </a>\n } @else {\n <span class=\"ll-pivot-leaf\"></span>\n }\n </td>\n }\n\n @if (withCheckbox()) {\n <td class=\"text-center b-table\">\n <label>\n <input type=\"checkbox\" [name]=\"'chk_pv_' + idList\" [id]=\"'chk_pv_' + idList\"\n animatedCheckbox [checked]=\"isItemSelected(idList)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toogleItem(idList, $event)\">\n </label>\n </td>\n }\n\n @if (customActions()) {\n <td class=\"text-center\">\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row, level: row._level }\"></ng-container>\n </td>\n }\n\n @if (customLevels().includes(row._level) && levelTemplate()) {\n <td [attr.colspan]=\"dataColSpan()\">\n <ng-container *ngTemplateOutlet=\"levelTemplate(); context: { $implicit: row, level: row._level, columns: columns() }\">\n </ng-container>\n </td>\n } @else {\n @for (col of columns(); track $index) {\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\n @if (columnDefMap().has(col.fieldname)) {\n <td>\n <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col, level: row._level }\">\n </ng-container>\n </td>\n } @else if (col.template) {\n <td>\n <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col, level: row._level }\">\n </ng-container>\n </td>\n } @else {\n @switch (col.tipo) {\n\n @case ('cell-render') {\n @let resolverItem = resolveCell(col.fieldname, row);\n @if (resolverItem) {\n <td [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\n @if (resolverItem.icon) {\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\n } @else if (resolverItem.class) {\n <span [ngClass]=\"resolverItem.class\">{{ resolverItem.text }}</span>\n } @else {\n {{ resolverItem.text }}\n }\n </td>\n }\n }\n\n @default {\n @if (col.fieldname === expandOn()) {\n <!-- Celda con \u00EDcono de expansi\u00F3n incrustado -->\n <td class=\"ll-pivot-expand-inline {{ getPosition(col) }}\"\n [class.cursor-pointer]=\"row._hasChildren\"\n [class.ll-cell--selected]=\"withCellSelect() && isCellSelected(idList, col.fieldname)\"\n [style.padding-left]=\"getIndentPx(row._level)\"\n [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\"\n [attr.title]=\"row[col.fieldname] || null\"\n [ngClass]=\"rowClassFn() ? rowClassFn()!(row) : null\"\n (click)=\"row._hasChildren ? toggleExpand($event, row) : (withCellSelect() ? onCellClick($event, row, col.fieldname) : null)\">\n @if (row._isLoading) {\n <span class=\"spinner-border spinner-border-sm ll-pivot-spinner me-1\" role=\"status\"></span>\n } @else if (row._hasChildren) {\n <a class=\"ll-pivot-toggle text-dark cursor-pointer me-1\" (click)=\"toggleExpand($event, row)\">\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"!row._isExpanded\"\n [class.fa-chevron-down]=\"row._isExpanded\"></i>\n </a>\n } @else {\n <span class=\"ll-pivot-leaf me-1\"></span>\n }\n <span [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"></span>\n </td>\n } @else {\n <td [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\n [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\"\n [attr.title]=\"row[col.fieldname] || null\"\n [ngClass]=\"rowClassFn() ? rowClassFn()!(row) : null\"\n [class.ll-cell--selected]=\"withCellSelect() && isCellSelected(idList, col.fieldname)\"\n [class.ll-cell--selectable]=\"withCellSelect()\"\n class=\"{{ getPosition(col) }}\"\n (click)=\"withCellSelect() ? onCellClick($event, row, col.fieldname) : null\">\n </td>\n }\n }\n\n }\n }\n }\n }\n }\n\n </tr>\n }\n\n <!-- Estado vac\u00EDo -->\n @if (rowFilter().length === 0) {\n <tr>\n <td [attr.colspan]=\"colSpan()\"\n class=\"ll-empty\">\n Sin datos\n </td>\n </tr>\n }\n\n <!-- Spacer inferior -->\n @if (paddingBottom() > 0) {\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\n <td [attr.colspan]=\"colSpan()\"></td>\n </tr>\n }\n </tbody>\n\n </table>\n</div>\n\n", styles: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:none!important;box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);box-shadow:none;font-weight:700}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-row--level-0{background-color:#fff}:host(.ll-variant--modern) .ll-row--level-1{background-color:#f5f5f5}:host(.ll-variant--modern) .ll-row--level-2{background-color:#eee}:host(.ll-variant--modern) .ll-row--level-3{background-color:#e0e0e0}.ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;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:0;overflow-anchor:none}.ll-scroll-container::-webkit-scrollbar{width:5px;height:5px}.ll-scroll-container::-webkit-scrollbar-track{background:transparent}.ll-scroll-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}.ll-scroll-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3}.ll-thead tr th{font-size:11px;font-weight:600;text-align:start;padding:12px 10px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;color:var(--text-color);background-color:var(--background-header-table);border:none;border-bottom:var(--border-table-header);box-shadow:none}.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:4px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.3}.ll-pivot-th-expand{width:32px;min-width:32px;max-width:32px}.ll-row{height:34px;cursor:pointer;background-color:#f0f0f0;transition:background-color .12s ease}.ll-row:hover{background-color:#eff6ff!important}.ll-row:hover td:first-child{border-left-color:#93c5fd!important}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row--selected td:first-child{border-left-color:transparent!important}.ll-row td{font-size:11px;font-weight:400;color:#202433!important;vertical-align:middle;padding:0 10px;border:none;border-bottom:1px solid #f1f5f9;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-bottom:2px solid #e4e4e4}.ll-row--level-0{background-color:#fff}.ll-row--level-0 td{font-weight:700;color:#1e3a5f}.ll-row--level-0 td:first-child{border-left:4px solid #2563eb!important}.ll-row--level-1 td{font-weight:600;color:#1e3a5f}.ll-row--level-1 td:first-child{border-left:3px solid #38bdf8!important}.ll-row--level-2 td:first-child{border-left:3px solid #34d399!important}.ll-row--level-3 td:first-child{border-left:3px solid #a78bfa!important}.ll-cell--selectable{cursor:cell;transition:background-color .1s}.ll-cell--selectable:hover:not(.ll-cell--selected){background-color:#2563eb0f!important}.ll-cell--selected{background-color:#2563eb21!important;box-shadow:inset 0 0 0 2px #2563eb;color:#1e3a5f!important}.ll-pivot-expand-inline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ll-pivot-expand-inline .ll-pivot-toggle,.ll-pivot-expand-inline .ll-pivot-leaf,.ll-pivot-expand-inline .ll-pivot-spinner{vertical-align:middle}.ll-pivot-expand-inline span:last-child{vertical-align:middle}.ll-pivot-expand-inline.cursor-pointer:hover span:last-child{text-decoration:underline;text-underline-offset:2px}.ll-pivot-expand-cell{width:32px;min-width:32px;text-align:left;vertical-align:middle}.ll-pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;transition:background-color .15s,border-color .15s;border:1px solid transparent}.ll-pivot-toggle:hover{background-color:#dbeafe;border-color:#93c5fd}.ll-pivot-toggle i{font-size:9px;color:#3b82f6}.ll-pivot-leaf{display:inline-block;width:10px;height:2px;border-radius:2px;background-color:#cbd5e1;vertical-align:middle;margin-left:5px}.ll-pivot-spinner{width:12px;height:12px;border-width:2px;vertical-align:middle}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:32px 16px;color:#94a3b8;font-size:12px;font-style:italic;letter-spacing:.02em}@media (max-width: 1600px){.ll-thead tr th,.ll-row td{font-size:10px}}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.cw-25{min-width:40px}.icon-table{color:#2e2e2ed8;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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"] }], animations: [fadeInOut, dropdownAnimation] });
|
|
4626
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableUltimatePivotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4627
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TableUltimatePivotComponent, isStandalone: true, selector: "app-table-ultimate-pivot", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", 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 }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, lazyLoad: { classPropertyName: "lazyLoad", publicName: "lazyLoad", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, maxLevels: { classPropertyName: "maxLevels", publicName: "maxLevels", isSignal: true, isRequired: false, transformFunction: null }, hasChildrenKey: { classPropertyName: "hasChildrenKey", publicName: "hasChildrenKey", isSignal: true, isRequired: false, transformFunction: null }, customLevels: { classPropertyName: "customLevels", publicName: "customLevels", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, expandOn: { classPropertyName: "expandOn", publicName: "expandOn", isSignal: true, isRequired: false, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, withCellSelect: { classPropertyName: "withCellSelect", publicName: "withCellSelect", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, selectedCell: { classPropertyName: "selectedCell", publicName: "selectedCell", isSignal: true, isRequired: false, transformFunction: null }, loadingIds: { classPropertyName: "loadingIds", publicName: "loadingIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowEvent: "rowEvent", cellEvent: "cellEvent", expandEvent: "expandEvent", selectedRow: "selectedRowChange", selectItems: "selectItemsChange", selectedCell: "selectedCellChange", loadingIds: "loadingIdsChange" }, host: { properties: { "class.ll-variant--modern": "variante() === \"modern\"" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }, { propertyName: "contentFilter", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "levelTemplate", first: true, predicate: ["levelTemplate"], descendants: true, isSignal: true }, { propertyName: "columnDefs", predicate: TsiColumnDefDirective, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\n<div class=\"ll-search-bar\">\n <div class=\"ll-search-bar__left\">\n <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\n </div>\n <div class=\"ll-search-bar__right\">\n <div class=\"ll-search-group\">\n <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\n <div class=\"ll-search-input-wrap\">\n <input type=\"text\" class=\"form-control cw-250\" placeholder=\"Buscar...\"\n [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\n <app-dropdown-cdk>\n <ng-template #trigger>\n <button class=\"btn btn-dark boton-buscar fs-7\">\n <i class=\"fas fa-cog\"></i>\n </button>\n </ng-template>\n <ng-template #content>\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\n <div class=\"popover-title fs-7 bg-white\">Filtros</div>\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\n (change)=\"toggleFiltros($event)\" id=\"filter_pv_todos\" />\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_pv_todos\">Todos</label>\n </div>\n @for (col of columns(); track col.caption) {\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n id=\"{{ 'filter_pv_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\n for=\"{{ 'filter_pv_' + col.caption }}\">{{ col.caption }}</label>\n </div>\n }\n </div>\n </ng-template>\n </app-dropdown-cdk>\n </div>\n </div>\n </div>\n</div>\n}\n\n<div #scrollContainer class=\"ll-scroll-container\"\n [style.height]=\"withHeight() ? heightStyle() : ''\"\n [style.max-height]=\"heightStyle()\"\n (scroll)=\"onScroll($event)\">\n <table class=\"ll-table\">\n\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\u2500 -->\n <thead class=\"ll-thead\">\n <tr>\n <!-- Columna de expansi\u00F3n: solo cuando no hay expandOn -->\n @if (!expandOn()) {\n <th class=\"ll-pivot-th-expand\"></th>\n }\n\n @if (withCheckbox()) {\n <th class=\"cw-20\">\n <label>\n <input type=\"checkbox\" name=\"chk_pv_all\" id=\"chk_pv_all\"\n animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\n </label>\n </th>\n }\n\n @if (customActions()) {\n <th class=\"cw-40\">\n <app-dropdown-cdk>\n <ng-template #trigger>\n <button class=\"btn p-0 d-flex mx-auto border-0 icon-table\"><i class=\"fas fa-cog\"></i></button>\n </ng-template>\n <ng-template #content>\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\n @for (col of columns(); track col.caption) {\n @if (col.caption) {\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n id=\"{{ 'switch_pv_' + col.caption }}\" [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\n for=\"{{ 'switch_pv_' + col.caption }}\">{{ col.caption }}</label>\n </div>\n }\n }\n </div>\n </ng-template>\n </app-dropdown-cdk>\n </th>\n }\n\n @for (col of columns(); track $index) {\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\n <th [title]=\"col.caption\" [style.width.px]=\"col.width || null\"\n [style.min-width.px]=\"col.width || null\" [style.max-width.px]=\"col.width || null\"\n class=\"ll-th-sortable\" (click)=\"toggleSort(col.fieldname)\">\n <span class=\"ll-th-content\">\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\n @if (sortField() === col.fieldname) {\n <i class=\"ms-1\"\n [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6' : 'fas fa-angle-down fs-6'\"></i>\n } @else {\n <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\n }\n </span>\n </th>\n }\n }\n </tr>\n </thead>\n\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\u2500\u2500 -->\n <tbody>\n <!-- Spacer superior -->\n @if (paddingTop() > 0) {\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\n <td [attr.colspan]=\"colSpan()\"></td>\n </tr>\n }\n\n <!-- Filas visibles -->\n @for (row of visibleRows(); track row.idListTsi) {\n @let idList = row.idListTsi;\n <tr class=\"ll-row\"\n [ngClass]=\"getLevelClass(row._level)\"\n [class.ll-row--selected]=\"isSelected(row, idList)\"\n (click)=\"selectRow(row, idList)\"\n (dblclick)=\"onDoubleClick(row)\"\n (contextmenu)=\"onRightClick($event, row)\">\n\n <!-- Celda dedicada de expansi\u00F3n: solo cuando no hay expandOn -->\n @if (!expandOn()) {\n <td class=\"ll-pivot-expand-cell\" [style.padding-left]=\"getIndentPx(row._level)\">\n @if (row._isLoading) {\n <span class=\"spinner-border spinner-border-sm ll-pivot-spinner\" role=\"status\"></span>\n } @else if (row._hasChildren && !customLevels().includes(row._level)) {\n <a class=\"ll-pivot-toggle text-dark cursor-pointer\" (click)=\"toggleExpand($event, row)\">\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"!row._isExpanded\"\n [class.fa-chevron-down]=\"row._isExpanded\"></i>\n </a>\n } @else {\n <span class=\"ll-pivot-leaf\"></span>\n }\n </td>\n }\n\n @if (withCheckbox()) {\n <td class=\"text-center b-table\">\n <label>\n <input type=\"checkbox\" [name]=\"'chk_pv_' + idList\" [id]=\"'chk_pv_' + idList\"\n animatedCheckbox [checked]=\"isItemSelected(idList)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toogleItem(idList, $event)\">\n </label>\n </td>\n }\n\n @if (customActions()) {\n <td class=\"text-center\">\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row, level: row._level }\"></ng-container>\n </td>\n }\n\n @if (customLevels().includes(row._level) && levelTemplate()) {\n <td [attr.colspan]=\"dataColSpan()\">\n <ng-container *ngTemplateOutlet=\"levelTemplate(); context: { $implicit: row, level: row._level, columns: columns() }\">\n </ng-container>\n </td>\n } @else {\n @for (col of columns(); track $index) {\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\n @if (columnDefMap().has(col.fieldname)) {\n <td>\n <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col, level: row._level }\">\n </ng-container>\n </td>\n } @else if (col.template) {\n <td>\n <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col, level: row._level }\">\n </ng-container>\n </td>\n } @else {\n @switch (col.tipo) {\n\n @case ('cell-render') {\n @let resolverItem = resolveCell(col.fieldname, row);\n @if (resolverItem) {\n <td [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\n @if (resolverItem.icon) {\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\n } @else if (resolverItem.class) {\n <span [ngClass]=\"resolverItem.class\">{{ resolverItem.text }}</span>\n } @else {\n {{ resolverItem.text }}\n }\n </td>\n }\n }\n\n @default {\n @if (col.fieldname === expandOn()) {\n <!-- Celda con \u00EDcono de expansi\u00F3n incrustado -->\n <td class=\"ll-pivot-expand-inline {{ getPosition(col) }}\"\n [class.cursor-pointer]=\"row._hasChildren\"\n [class.ll-cell--selected]=\"withCellSelect() && isCellSelected(idList, col.fieldname)\"\n [style.padding-left]=\"getIndentPx(row._level)\"\n [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\"\n [attr.title]=\"row[col.fieldname] || null\"\n [ngClass]=\"rowClassFn() ? rowClassFn()!(row) : null\"\n (click)=\"row._hasChildren ? toggleExpand($event, row) : (withCellSelect() ? onCellClick($event, row, col.fieldname) : null)\">\n @if (row._isLoading) {\n <span class=\"spinner-border spinner-border-sm ll-pivot-spinner me-1\" role=\"status\"></span>\n } @else if (row._hasChildren) {\n <a class=\"ll-pivot-toggle text-dark cursor-pointer me-1\" (click)=\"toggleExpand($event, row)\">\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"!row._isExpanded\"\n [class.fa-chevron-down]=\"row._isExpanded\"></i>\n </a>\n } @else {\n <span class=\"ll-pivot-leaf me-1\"></span>\n }\n <span [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"></span>\n </td>\n } @else {\n <td [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\n [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\"\n [attr.title]=\"row[col.fieldname] || null\"\n [ngClass]=\"rowClassFn() ? rowClassFn()!(row) : null\"\n [class.ll-cell--selected]=\"withCellSelect() && isCellSelected(idList, col.fieldname)\"\n [class.ll-cell--selectable]=\"withCellSelect()\"\n class=\"{{ getPosition(col) }}\"\n (click)=\"withCellSelect() ? onCellClick($event, row, col.fieldname) : null\">\n </td>\n }\n }\n\n }\n }\n }\n }\n }\n\n </tr>\n }\n\n <!-- Estado vac\u00EDo -->\n @if (rowFilter().length === 0) {\n <tr>\n <td [attr.colspan]=\"colSpan()\"\n class=\"ll-empty\">\n Sin datos\n </td>\n </tr>\n }\n\n <!-- Spacer inferior -->\n @if (paddingBottom() > 0) {\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\n <td [attr.colspan]=\"colSpan()\"></td>\n </tr>\n }\n </tbody>\n\n </table>\n</div>\n\n", styles: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:none!important;box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);box-shadow:none;font-weight:700}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-row--level-0{background-color:#fff}:host(.ll-variant--modern) .ll-row--level-1{background-color:#f5f5f5}:host(.ll-variant--modern) .ll-row--level-2{background-color:#eee}:host(.ll-variant--modern) .ll-row--level-3{background-color:#e0e0e0}.ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;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:0;overflow-anchor:none}.ll-scroll-container::-webkit-scrollbar{width:5px;height:5px}.ll-scroll-container::-webkit-scrollbar-track{background:transparent}.ll-scroll-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}.ll-scroll-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3}.ll-thead tr th{font-size:11px;font-weight:600;text-align:start;padding:12px 10px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;color:var(--text-color);background-color:var(--background-header-table);border:none;border-bottom:var(--border-table-header);box-shadow:none}.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:4px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.3}.ll-pivot-th-expand{width:32px;min-width:32px;max-width:32px}.ll-row{height:34px;cursor:pointer;background-color:#f0f0f0;transition:background-color .12s ease}.ll-row:hover{background-color:#eff6ff!important}.ll-row:hover td:first-child{border-left-color:#93c5fd!important}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row--selected td:first-child{border-left-color:transparent!important}.ll-row td{font-size:11px;font-weight:400;color:#202433!important;vertical-align:middle;padding:0 10px;border:none;border-bottom:1px solid #f1f5f9;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-bottom:2px solid #e4e4e4}.ll-row--level-0{background-color:#fff}.ll-row--level-0 td{font-weight:700;color:#1e3a5f}.ll-row--level-0 td:first-child{border-left:4px solid #2563eb!important}.ll-row--level-1 td{font-weight:600;color:#1e3a5f}.ll-row--level-1 td:first-child{border-left:3px solid #38bdf8!important}.ll-row--level-2 td:first-child{border-left:3px solid #34d399!important}.ll-row--level-3 td:first-child{border-left:3px solid #a78bfa!important}.ll-cell--selectable{cursor:cell;transition:background-color .1s}.ll-cell--selectable:hover:not(.ll-cell--selected){background-color:#2563eb0f!important}.ll-cell--selected{background-color:#2563eb21!important;box-shadow:inset 0 0 0 2px #2563eb;color:#1e3a5f!important}.ll-pivot-expand-inline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ll-pivot-expand-inline .ll-pivot-toggle,.ll-pivot-expand-inline .ll-pivot-leaf,.ll-pivot-expand-inline .ll-pivot-spinner{vertical-align:middle}.ll-pivot-expand-inline span:last-child{vertical-align:middle}.ll-pivot-expand-inline.cursor-pointer:hover span:last-child{text-decoration:underline;text-underline-offset:2px}.ll-pivot-expand-cell{width:32px;min-width:32px;text-align:left;vertical-align:middle}.ll-pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;transition:background-color .15s,border-color .15s;border:1px solid transparent}.ll-pivot-toggle:hover{background-color:#dbeafe;border-color:#93c5fd}.ll-pivot-toggle i{font-size:9px;color:#3b82f6}.ll-pivot-leaf{display:inline-block;width:10px;height:2px;border-radius:2px;background-color:#cbd5e1;vertical-align:middle;margin-left:5px}.ll-pivot-spinner{width:12px;height:12px;border-width:2px;vertical-align:middle}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:32px 16px;color:#94a3b8;font-size:12px;font-style:italic;letter-spacing:.02em}@media(max-width:1600px){.ll-thead tr th,.ll-row td{font-size:10px}}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.cw-25{min-width:40px}.icon-table{color:#2e2e2ed8;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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"] }], animations: [fadeInOut, dropdownAnimation] });
|
|
4626
4628
|
}
|
|
4627
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4629
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableUltimatePivotComponent, decorators: [{
|
|
4628
4630
|
type: Component,
|
|
4629
4631
|
args: [{ selector: 'app-table-ultimate-pivot', standalone: true, imports: [FormsModule, CommonModule, DropdownCdkComponent, AnimatedCheckboxDirective, NgTemplateOutlet], animations: [fadeInOut, dropdownAnimation], host: {
|
|
4630
4632
|
'[class.ll-variant--modern]': 'variante() === "modern"'
|
|
4631
|
-
}, template: "@if (withFiltro()) {\n<div class=\"ll-search-bar\">\n <div class=\"ll-search-bar__left\">\n <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\n </div>\n <div class=\"ll-search-bar__right\">\n <div class=\"ll-search-group\">\n <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\n <div class=\"ll-search-input-wrap\">\n <input type=\"text\" class=\"form-control cw-250\" placeholder=\"Buscar...\"\n [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\n <app-dropdown-cdk>\n <ng-template #trigger>\n <button class=\"btn btn-dark boton-buscar fs-7\">\n <i class=\"fas fa-cog\"></i>\n </button>\n </ng-template>\n <ng-template #content>\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\n <div class=\"popover-title fs-7 bg-white\">Filtros</div>\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\n (change)=\"toggleFiltros($event)\" id=\"filter_pv_todos\" />\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_pv_todos\">Todos</label>\n </div>\n @for (col of columns(); track col.caption) {\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n id=\"{{ 'filter_pv_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\n for=\"{{ 'filter_pv_' + col.caption }}\">{{ col.caption }}</label>\n </div>\n }\n </div>\n </ng-template>\n </app-dropdown-cdk>\n </div>\n </div>\n </div>\n</div>\n}\n\n<div #scrollContainer class=\"ll-scroll-container\"\n [style.height]=\"withHeight() ? heightStyle() : ''\"\n [style.max-height]=\"heightStyle()\"\n (scroll)=\"onScroll($event)\">\n <table class=\"ll-table\">\n\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\u2500 -->\n <thead class=\"ll-thead\">\n <tr>\n <!-- Columna de expansi\u00F3n: solo cuando no hay expandOn -->\n @if (!expandOn()) {\n <th class=\"ll-pivot-th-expand\"></th>\n }\n\n @if (withCheckbox()) {\n <th class=\"cw-20\">\n <label>\n <input type=\"checkbox\" name=\"chk_pv_all\" id=\"chk_pv_all\"\n animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\n </label>\n </th>\n }\n\n @if (customActions()) {\n <th class=\"cw-40\">\n <app-dropdown-cdk>\n <ng-template #trigger>\n <button class=\"btn p-0 d-flex mx-auto border-0 icon-table\"><i class=\"fas fa-cog\"></i></button>\n </ng-template>\n <ng-template #content>\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\n @for (col of columns(); track col.caption) {\n @if (col.caption) {\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n id=\"{{ 'switch_pv_' + col.caption }}\" [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\n for=\"{{ 'switch_pv_' + col.caption }}\">{{ col.caption }}</label>\n </div>\n }\n }\n </div>\n </ng-template>\n </app-dropdown-cdk>\n </th>\n }\n\n @for (col of columns(); track $index) {\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\n <th [title]=\"col.caption\" [style.width.px]=\"col.width || null\"\n [style.min-width.px]=\"col.width || null\" [style.max-width.px]=\"col.width || null\"\n class=\"ll-th-sortable\" (click)=\"toggleSort(col.fieldname)\">\n <span class=\"ll-th-content\">\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\n @if (sortField() === col.fieldname) {\n <i class=\"ms-1\"\n [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6' : 'fas fa-angle-down fs-6'\"></i>\n } @else {\n <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\n }\n </span>\n </th>\n }\n }\n </tr>\n </thead>\n\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\u2500\u2500 -->\n <tbody>\n <!-- Spacer superior -->\n @if (paddingTop() > 0) {\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\n <td [attr.colspan]=\"colSpan()\"></td>\n </tr>\n }\n\n <!-- Filas visibles -->\n @for (row of visibleRows(); track row.idListTsi) {\n @let idList = row.idListTsi;\n <tr class=\"ll-row\"\n [ngClass]=\"getLevelClass(row._level)\"\n [class.ll-row--selected]=\"isSelected(row, idList)\"\n (click)=\"selectRow(row, idList)\"\n (dblclick)=\"onDoubleClick(row)\"\n (contextmenu)=\"onRightClick($event, row)\">\n\n <!-- Celda dedicada de expansi\u00F3n: solo cuando no hay expandOn -->\n @if (!expandOn()) {\n <td class=\"ll-pivot-expand-cell\" [style.padding-left]=\"getIndentPx(row._level)\">\n @if (row._isLoading) {\n <span class=\"spinner-border spinner-border-sm ll-pivot-spinner\" role=\"status\"></span>\n } @else if (row._hasChildren && !customLevels().includes(row._level)) {\n <a class=\"ll-pivot-toggle text-dark cursor-pointer\" (click)=\"toggleExpand($event, row)\">\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"!row._isExpanded\"\n [class.fa-chevron-down]=\"row._isExpanded\"></i>\n </a>\n } @else {\n <span class=\"ll-pivot-leaf\"></span>\n }\n </td>\n }\n\n @if (withCheckbox()) {\n <td class=\"text-center b-table\">\n <label>\n <input type=\"checkbox\" [name]=\"'chk_pv_' + idList\" [id]=\"'chk_pv_' + idList\"\n animatedCheckbox [checked]=\"isItemSelected(idList)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toogleItem(idList, $event)\">\n </label>\n </td>\n }\n\n @if (customActions()) {\n <td class=\"text-center\">\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row, level: row._level }\"></ng-container>\n </td>\n }\n\n @if (customLevels().includes(row._level) && levelTemplate()) {\n <td [attr.colspan]=\"dataColSpan()\">\n <ng-container *ngTemplateOutlet=\"levelTemplate(); context: { $implicit: row, level: row._level, columns: columns() }\">\n </ng-container>\n </td>\n } @else {\n @for (col of columns(); track $index) {\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\n @if (columnDefMap().has(col.fieldname)) {\n <td>\n <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col, level: row._level }\">\n </ng-container>\n </td>\n } @else if (col.template) {\n <td>\n <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col, level: row._level }\">\n </ng-container>\n </td>\n } @else {\n @switch (col.tipo) {\n\n @case ('cell-render') {\n @let resolverItem = resolveCell(col.fieldname, row);\n @if (resolverItem) {\n <td [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\n @if (resolverItem.icon) {\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\n } @else if (resolverItem.class) {\n <span [ngClass]=\"resolverItem.class\">{{ resolverItem.text }}</span>\n } @else {\n {{ resolverItem.text }}\n }\n </td>\n }\n }\n\n @default {\n @if (col.fieldname === expandOn()) {\n <!-- Celda con \u00EDcono de expansi\u00F3n incrustado -->\n <td class=\"ll-pivot-expand-inline {{ getPosition(col) }}\"\n [class.cursor-pointer]=\"row._hasChildren\"\n [class.ll-cell--selected]=\"withCellSelect() && isCellSelected(idList, col.fieldname)\"\n [style.padding-left]=\"getIndentPx(row._level)\"\n [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\"\n [attr.title]=\"row[col.fieldname] || null\"\n [ngClass]=\"rowClassFn() ? rowClassFn()!(row) : null\"\n (click)=\"row._hasChildren ? toggleExpand($event, row) : (withCellSelect() ? onCellClick($event, row, col.fieldname) : null)\">\n @if (row._isLoading) {\n <span class=\"spinner-border spinner-border-sm ll-pivot-spinner me-1\" role=\"status\"></span>\n } @else if (row._hasChildren) {\n <a class=\"ll-pivot-toggle text-dark cursor-pointer me-1\" (click)=\"toggleExpand($event, row)\">\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"!row._isExpanded\"\n [class.fa-chevron-down]=\"row._isExpanded\"></i>\n </a>\n } @else {\n <span class=\"ll-pivot-leaf me-1\"></span>\n }\n <span [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"></span>\n </td>\n } @else {\n <td [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\n [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\"\n [attr.title]=\"row[col.fieldname] || null\"\n [ngClass]=\"rowClassFn() ? rowClassFn()!(row) : null\"\n [class.ll-cell--selected]=\"withCellSelect() && isCellSelected(idList, col.fieldname)\"\n [class.ll-cell--selectable]=\"withCellSelect()\"\n class=\"{{ getPosition(col) }}\"\n (click)=\"withCellSelect() ? onCellClick($event, row, col.fieldname) : null\">\n </td>\n }\n }\n\n }\n }\n }\n }\n }\n\n </tr>\n }\n\n <!-- Estado vac\u00EDo -->\n @if (rowFilter().length === 0) {\n <tr>\n <td [attr.colspan]=\"colSpan()\"\n class=\"ll-empty\">\n Sin datos\n </td>\n </tr>\n }\n\n <!-- Spacer inferior -->\n @if (paddingBottom() > 0) {\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\n <td [attr.colspan]=\"colSpan()\"></td>\n </tr>\n }\n </tbody>\n\n </table>\n</div>\n\n", styles: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:none!important;box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);box-shadow:none;font-weight:700}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-row--level-0{background-color:#fff}:host(.ll-variant--modern) .ll-row--level-1{background-color:#f5f5f5}:host(.ll-variant--modern) .ll-row--level-2{background-color:#eee}:host(.ll-variant--modern) .ll-row--level-3{background-color:#e0e0e0}.ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;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:0;overflow-anchor:none}.ll-scroll-container::-webkit-scrollbar{width:5px;height:5px}.ll-scroll-container::-webkit-scrollbar-track{background:transparent}.ll-scroll-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}.ll-scroll-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3}.ll-thead tr th{font-size:11px;font-weight:600;text-align:start;padding:12px 10px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;color:var(--text-color);background-color:var(--background-header-table);border:none;border-bottom:var(--border-table-header);box-shadow:none}.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:4px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.3}.ll-pivot-th-expand{width:32px;min-width:32px;max-width:32px}.ll-row{height:34px;cursor:pointer;background-color:#f0f0f0;transition:background-color .12s ease}.ll-row:hover{background-color:#eff6ff!important}.ll-row:hover td:first-child{border-left-color:#93c5fd!important}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row--selected td:first-child{border-left-color:transparent!important}.ll-row td{font-size:11px;font-weight:400;color:#202433!important;vertical-align:middle;padding:0 10px;border:none;border-bottom:1px solid #f1f5f9;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-bottom:2px solid #e4e4e4}.ll-row--level-0{background-color:#fff}.ll-row--level-0 td{font-weight:700;color:#1e3a5f}.ll-row--level-0 td:first-child{border-left:4px solid #2563eb!important}.ll-row--level-1 td{font-weight:600;color:#1e3a5f}.ll-row--level-1 td:first-child{border-left:3px solid #38bdf8!important}.ll-row--level-2 td:first-child{border-left:3px solid #34d399!important}.ll-row--level-3 td:first-child{border-left:3px solid #a78bfa!important}.ll-cell--selectable{cursor:cell;transition:background-color .1s}.ll-cell--selectable:hover:not(.ll-cell--selected){background-color:#2563eb0f!important}.ll-cell--selected{background-color:#2563eb21!important;box-shadow:inset 0 0 0 2px #2563eb;color:#1e3a5f!important}.ll-pivot-expand-inline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ll-pivot-expand-inline .ll-pivot-toggle,.ll-pivot-expand-inline .ll-pivot-leaf,.ll-pivot-expand-inline .ll-pivot-spinner{vertical-align:middle}.ll-pivot-expand-inline span:last-child{vertical-align:middle}.ll-pivot-expand-inline.cursor-pointer:hover span:last-child{text-decoration:underline;text-underline-offset:2px}.ll-pivot-expand-cell{width:32px;min-width:32px;text-align:left;vertical-align:middle}.ll-pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;transition:background-color .15s,border-color .15s;border:1px solid transparent}.ll-pivot-toggle:hover{background-color:#dbeafe;border-color:#93c5fd}.ll-pivot-toggle i{font-size:9px;color:#3b82f6}.ll-pivot-leaf{display:inline-block;width:10px;height:2px;border-radius:2px;background-color:#cbd5e1;vertical-align:middle;margin-left:5px}.ll-pivot-spinner{width:12px;height:12px;border-width:2px;vertical-align:middle}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:32px 16px;color:#94a3b8;font-size:12px;font-style:italic;letter-spacing:.02em}@media (max-width: 1600px){.ll-thead tr th,.ll-row td{font-size:10px}}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.cw-25{min-width:40px}.icon-table{color:#2e2e2ed8;font-size:12px}\n"] }]
|
|
4633
|
+
}, template: "@if (withFiltro()) {\n<div class=\"ll-search-bar\">\n <div class=\"ll-search-bar__left\">\n <ng-container *ngTemplateOutlet=\"contentFilter();\"></ng-container>\n </div>\n <div class=\"ll-search-bar__right\">\n <div class=\"ll-search-group\">\n <label class=\"form-label mb-0 ll-search-label\">Buscar:</label>\n <div class=\"ll-search-input-wrap\">\n <input type=\"text\" class=\"form-control cw-250\" placeholder=\"Buscar...\"\n [value]=\"busqueda()\" (input)=\"textoDigitado($event)\" />\n <app-dropdown-cdk>\n <ng-template #trigger>\n <button class=\"btn btn-dark boton-buscar fs-7\">\n <i class=\"fas fa-cog\"></i>\n </button>\n </ng-template>\n <ng-template #content>\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\n <div class=\"popover-title fs-7 bg-white\">Filtros</div>\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\n (change)=\"toggleFiltros($event)\" id=\"filter_pv_todos\" />\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\" for=\"filter_pv_todos\">Todos</label>\n </div>\n @for (col of columns(); track col.caption) {\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n id=\"{{ 'filter_pv_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\"\n for=\"{{ 'filter_pv_' + col.caption }}\">{{ col.caption }}</label>\n </div>\n }\n </div>\n </ng-template>\n </app-dropdown-cdk>\n </div>\n </div>\n </div>\n</div>\n}\n\n<div #scrollContainer class=\"ll-scroll-container\"\n [style.height]=\"withHeight() ? heightStyle() : ''\"\n [style.max-height]=\"heightStyle()\"\n (scroll)=\"onScroll($event)\">\n <table class=\"ll-table\">\n\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\u2500 -->\n <thead class=\"ll-thead\">\n <tr>\n <!-- Columna de expansi\u00F3n: solo cuando no hay expandOn -->\n @if (!expandOn()) {\n <th class=\"ll-pivot-th-expand\"></th>\n }\n\n @if (withCheckbox()) {\n <th class=\"cw-20\">\n <label>\n <input type=\"checkbox\" name=\"chk_pv_all\" id=\"chk_pv_all\"\n animatedCheckbox [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\n </label>\n </th>\n }\n\n @if (customActions()) {\n <th class=\"cw-40\">\n <app-dropdown-cdk>\n <ng-template #trigger>\n <button class=\"btn p-0 d-flex mx-auto border-0 icon-table\"><i class=\"fas fa-cog\"></i></button>\n </ng-template>\n <ng-template #content>\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\n @for (col of columns(); track col.caption) {\n @if (col.caption) {\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\n id=\"{{ 'switch_pv_' + col.caption }}\" [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\n for=\"{{ 'switch_pv_' + col.caption }}\">{{ col.caption }}</label>\n </div>\n }\n }\n </div>\n </ng-template>\n </app-dropdown-cdk>\n </th>\n }\n\n @for (col of columns(); track $index) {\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\n <th [title]=\"col.caption\" [style.width.px]=\"col.width || null\"\n [style.min-width.px]=\"col.width || null\" [style.max-width.px]=\"col.width || null\"\n class=\"ll-th-sortable\" (click)=\"toggleSort(col.fieldname)\">\n <span class=\"ll-th-content\">\n <span class=\"ll-th-caption\">{{ col.caption }}</span>\n @if (sortField() === col.fieldname) {\n <i class=\"ms-1\"\n [ngClass]=\"sortDir() === 'asc' ? 'fas fa-angle-up fs-6' : 'fas fa-angle-down fs-6'\"></i>\n } @else {\n <i class=\"fas fa-sort ms-1 ll-sort-idle\"></i>\n }\n </span>\n </th>\n }\n }\n </tr>\n </thead>\n\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\u2500\u2500 -->\n <tbody>\n <!-- Spacer superior -->\n @if (paddingTop() > 0) {\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingTop()\">\n <td [attr.colspan]=\"colSpan()\"></td>\n </tr>\n }\n\n <!-- Filas visibles -->\n @for (row of visibleRows(); track row.idListTsi) {\n @let idList = row.idListTsi;\n <tr class=\"ll-row\"\n [ngClass]=\"getLevelClass(row._level)\"\n [class.ll-row--selected]=\"isSelected(row, idList)\"\n (click)=\"selectRow(row, idList)\"\n (dblclick)=\"onDoubleClick(row)\"\n (contextmenu)=\"onRightClick($event, row)\">\n\n <!-- Celda dedicada de expansi\u00F3n: solo cuando no hay expandOn -->\n @if (!expandOn()) {\n <td class=\"ll-pivot-expand-cell\" [style.padding-left]=\"getIndentPx(row._level)\">\n @if (row._isLoading) {\n <span class=\"spinner-border spinner-border-sm ll-pivot-spinner\" role=\"status\"></span>\n } @else if (row._hasChildren && !customLevels().includes(row._level)) {\n <a class=\"ll-pivot-toggle text-dark cursor-pointer\" (click)=\"toggleExpand($event, row)\">\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"!row._isExpanded\"\n [class.fa-chevron-down]=\"row._isExpanded\"></i>\n </a>\n } @else {\n <span class=\"ll-pivot-leaf\"></span>\n }\n </td>\n }\n\n @if (withCheckbox()) {\n <td class=\"text-center b-table\">\n <label>\n <input type=\"checkbox\" [name]=\"'chk_pv_' + idList\" [id]=\"'chk_pv_' + idList\"\n animatedCheckbox [checked]=\"isItemSelected(idList)\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toogleItem(idList, $event)\">\n </label>\n </td>\n }\n\n @if (customActions()) {\n <td class=\"text-center\">\n <ng-container *ngTemplateOutlet=\"customActions(); context: { $implicit: row, level: row._level }\"></ng-container>\n </td>\n }\n\n @if (customLevels().includes(row._level) && levelTemplate()) {\n <td [attr.colspan]=\"dataColSpan()\">\n <ng-container *ngTemplateOutlet=\"levelTemplate(); context: { $implicit: row, level: row._level, columns: columns() }\">\n </ng-container>\n </td>\n } @else {\n @for (col of columns(); track $index) {\n @if (validaVisibilidad(col.visible) && visibilidadColumn()[col.fieldname] !== false) {\n @if (columnDefMap().has(col.fieldname)) {\n <td>\n <ng-container *ngTemplateOutlet=\"columnDefMap().get(col.fieldname)!; context: { $implicit: row, column: col, level: row._level }\">\n </ng-container>\n </td>\n } @else if (col.template) {\n <td>\n <ng-container *ngTemplateOutlet=\"col.template; context: { $implicit: row, column: col, level: row._level }\">\n </ng-container>\n </td>\n } @else {\n @switch (col.tipo) {\n\n @case ('cell-render') {\n @let resolverItem = resolveCell(col.fieldname, row);\n @if (resolverItem) {\n <td [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\n @if (resolverItem.icon) {\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\n } @else if (resolverItem.class) {\n <span [ngClass]=\"resolverItem.class\">{{ resolverItem.text }}</span>\n } @else {\n {{ resolverItem.text }}\n }\n </td>\n }\n }\n\n @default {\n @if (col.fieldname === expandOn()) {\n <!-- Celda con \u00EDcono de expansi\u00F3n incrustado -->\n <td class=\"ll-pivot-expand-inline {{ getPosition(col) }}\"\n [class.cursor-pointer]=\"row._hasChildren\"\n [class.ll-cell--selected]=\"withCellSelect() && isCellSelected(idList, col.fieldname)\"\n [style.padding-left]=\"getIndentPx(row._level)\"\n [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\"\n [attr.title]=\"row[col.fieldname] || null\"\n [ngClass]=\"rowClassFn() ? rowClassFn()!(row) : null\"\n (click)=\"row._hasChildren ? toggleExpand($event, row) : (withCellSelect() ? onCellClick($event, row, col.fieldname) : null)\">\n @if (row._isLoading) {\n <span class=\"spinner-border spinner-border-sm ll-pivot-spinner me-1\" role=\"status\"></span>\n } @else if (row._hasChildren) {\n <a class=\"ll-pivot-toggle text-dark cursor-pointer me-1\" (click)=\"toggleExpand($event, row)\">\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"!row._isExpanded\"\n [class.fa-chevron-down]=\"row._isExpanded\"></i>\n </a>\n } @else {\n <span class=\"ll-pivot-leaf me-1\"></span>\n }\n <span [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"></span>\n </td>\n } @else {\n <td [innerHTML]=\"getHighlight(row._format?.[col.fieldname] ?? row[col.fieldname], col.fieldname)\"\n [style.width]=\"col.width ? col.width + 'px' : 'auto'\"\n [style.max-width]=\"col.width ? col.width + 'px' : 'auto'\"\n [attr.title]=\"row[col.fieldname] || null\"\n [ngClass]=\"rowClassFn() ? rowClassFn()!(row) : null\"\n [class.ll-cell--selected]=\"withCellSelect() && isCellSelected(idList, col.fieldname)\"\n [class.ll-cell--selectable]=\"withCellSelect()\"\n class=\"{{ getPosition(col) }}\"\n (click)=\"withCellSelect() ? onCellClick($event, row, col.fieldname) : null\">\n </td>\n }\n }\n\n }\n }\n }\n }\n }\n\n </tr>\n }\n\n <!-- Estado vac\u00EDo -->\n @if (rowFilter().length === 0) {\n <tr>\n <td [attr.colspan]=\"colSpan()\"\n class=\"ll-empty\">\n Sin datos\n </td>\n </tr>\n }\n\n <!-- Spacer inferior -->\n @if (paddingBottom() > 0) {\n <tr class=\"ll-spacer\" [style.height.px]=\"paddingBottom()\">\n <td [attr.colspan]=\"colSpan()\"></td>\n </tr>\n }\n </tbody>\n\n </table>\n</div>\n\n", styles: [":host(.ll-variant--modern) .ll-search-bar .ll-search-label{display:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control{width:250px!important;min-width:250px!important;border-radius:5px!important;border:1px solid rgba(0,0,0,.12);background-color:#fff;font-size:12px;padding-left:34px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;transition:border-color .15s ease,box-shadow .15s ease;height:30px!important;font-weight:400}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control::placeholder{color:#9ca3af}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap input.form-control:focus{border-color:#1e293b;box-shadow:0 0 0 3px #1e293b14;outline:none}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar{border-radius:5px;height:30px!important;width:30px!important;min-width:30px!important;background-color:#fff!important;border:1px solid rgba(0,0,0,.12)!important;color:#546074!important}:host(.ll-variant--modern) .ll-search-bar .ll-search-input-wrap .boton-buscar:hover{background-color:#f3f4f6!important;border-color:#0003!important}:host(.ll-variant--modern) .ll-scroll-container{border:none!important;box-shadow:0 1px 3px #0000000f,0 4px 16px #0000000a;background:#fff}:host(.ll-variant--modern) .ll-table{border-collapse:separate;border-spacing:0;background:#fff}:host(.ll-variant--modern) .ll-thead tr th{background:#f1f1f1;color:#333!important;border:none;border-bottom:1px solid rgba(0,0,0,.1);border-top:1px solid rgba(0,0,0,.1);box-shadow:none;font-weight:700}:host(.ll-variant--modern) .ll-th-sortable:hover{background-color:#fff!important}:host(.ll-variant--modern) .ll-row--level-0{background-color:#fff}:host(.ll-variant--modern) .ll-row--level-1{background-color:#f5f5f5}:host(.ll-variant--modern) .ll-row--level-2{background-color:#eee}:host(.ll-variant--modern) .ll-row--level-3{background-color:#e0e0e0}.ll-search-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;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:0;overflow-anchor:none}.ll-scroll-container::-webkit-scrollbar{width:5px;height:5px}.ll-scroll-container::-webkit-scrollbar-track{background:transparent}.ll-scroll-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:10px}.ll-scroll-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}.ll-table{width:100%;border-collapse:collapse;table-layout:auto;white-space:nowrap}.ll-thead{position:sticky;top:0;z-index:3}.ll-thead tr th{font-size:11px;font-weight:600;text-align:start;padding:12px 10px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;color:var(--text-color);background-color:var(--background-header-table);border:none;border-bottom:var(--border-table-header);box-shadow:none}.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:4px}.ll-th-caption{overflow:hidden;text-overflow:ellipsis}.ll-sort-idle{opacity:.3}.ll-pivot-th-expand{width:32px;min-width:32px;max-width:32px}.ll-row{height:34px;cursor:pointer;background-color:#f0f0f0;transition:background-color .12s ease}.ll-row:hover{background-color:#eff6ff!important}.ll-row:hover td:first-child{border-left-color:#93c5fd!important}.ll-row--selected{background:var(--table-active-bg)!important;color:var(--table-active-color)!important}.ll-row--selected td:first-child{border-left-color:transparent!important}.ll-row td{font-size:11px;font-weight:400;color:#202433!important;vertical-align:middle;padding:0 10px;border:none;border-bottom:1px solid #f1f5f9;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border-bottom:2px solid #e4e4e4}.ll-row--level-0{background-color:#fff}.ll-row--level-0 td{font-weight:700;color:#1e3a5f}.ll-row--level-0 td:first-child{border-left:4px solid #2563eb!important}.ll-row--level-1 td{font-weight:600;color:#1e3a5f}.ll-row--level-1 td:first-child{border-left:3px solid #38bdf8!important}.ll-row--level-2 td:first-child{border-left:3px solid #34d399!important}.ll-row--level-3 td:first-child{border-left:3px solid #a78bfa!important}.ll-cell--selectable{cursor:cell;transition:background-color .1s}.ll-cell--selectable:hover:not(.ll-cell--selected){background-color:#2563eb0f!important}.ll-cell--selected{background-color:#2563eb21!important;box-shadow:inset 0 0 0 2px #2563eb;color:#1e3a5f!important}.ll-pivot-expand-inline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ll-pivot-expand-inline .ll-pivot-toggle,.ll-pivot-expand-inline .ll-pivot-leaf,.ll-pivot-expand-inline .ll-pivot-spinner{vertical-align:middle}.ll-pivot-expand-inline span:last-child{vertical-align:middle}.ll-pivot-expand-inline.cursor-pointer:hover span:last-child{text-decoration:underline;text-underline-offset:2px}.ll-pivot-expand-cell{width:32px;min-width:32px;text-align:left;vertical-align:middle}.ll-pivot-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;transition:background-color .15s,border-color .15s;border:1px solid transparent}.ll-pivot-toggle:hover{background-color:#dbeafe;border-color:#93c5fd}.ll-pivot-toggle i{font-size:9px;color:#3b82f6}.ll-pivot-leaf{display:inline-block;width:10px;height:2px;border-radius:2px;background-color:#cbd5e1;vertical-align:middle;margin-left:5px}.ll-pivot-spinner{width:12px;height:12px;border-width:2px;vertical-align:middle}.ll-spacer td{padding:0;border:none}.ll-empty{text-align:center;padding:32px 16px;color:#94a3b8;font-size:12px;font-style:italic;letter-spacing:.02em}@media(max-width:1600px){.ll-thead tr th,.ll-row td{font-size:10px}}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.cw-25{min-width:40px}.icon-table{color:#2e2e2ed8;font-size:12px}\n"] }]
|
|
4632
4634
|
}] });
|
|
4633
4635
|
|
|
4634
4636
|
class TableAgrupadaComponent {
|
|
@@ -4976,12 +4978,12 @@ class TableAgrupadaComponent {
|
|
|
4976
4978
|
event.preventDefault();
|
|
4977
4979
|
this.rowEvent.emit({ usecase: 3, data: row });
|
|
4978
4980
|
}
|
|
4979
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4980
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableAgrupadaComponent, isStandalone: true, selector: "app-table-agrupada", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n\r\n @if (hasColumnGroups()) {\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n </th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th rowspan=\"2\" class=\"cw-40 b-table\">\r\n </th>\r\n }\r\n\r\n @for (seg of headerSegments(); track $index) {\r\n\r\n @if (seg.type === 'column') {\r\n <th class=\"b-table\" rowspan=\"2\"\r\n [style.width]=\"seg.column?.width ? seg.column.width + 'px' : 'auto'\">\r\n {{ seg.column?.caption }}\r\n </th>\r\n }\r\n\r\n @if (seg.type === 'group') {\r\n <th class=\"b-table text-center fw-bold\" [attr.colspan]=\"seg.group?.colspan\">\r\n {{ seg.group?.label }}\r\n </th>\r\n }\r\n\r\n }\r\n </tr>\r\n\r\n <tr class=\"shadow-sm\">\r\n @for (column of groupedColumns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i\r\n [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n } @else {\r\n\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i\r\n [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n }\r\n\r\n <tbody>\r\n @for (row of dataVirtual(); track row.idListTsi) {\r\n @let idList = row.idListTsi;\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <label>\r\n <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n [disabled]=\"isCheckboxDisabled(row)\">\r\n </label>\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }@else {\r\n @switch (column.tipo) {\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"b-table {{getPosition(column)}}\">\r\n </td>\r\n }\r\n }\r\n\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n <tr #anchor>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"text-center text-muted py-3\">\r\n @if (isLoading()) {\r\n <span>Cargando m\u00E1s registros...</span>\r\n }\r\n @if (!isLoading() && dataVirtual().length >= 5000) {\r\n <span>No hay m\u00E1s registros</span>\r\n }\r\n </td>\r\n </tr>\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }], animations: [fadeInOut, dropdownAnimation] });
|
|
4981
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableAgrupadaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4982
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: TableAgrupadaComponent, isStandalone: true, selector: "app-table-agrupada", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n\r\n @if (hasColumnGroups()) {\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n </th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th rowspan=\"2\" class=\"cw-40 b-table\">\r\n </th>\r\n }\r\n\r\n @for (seg of headerSegments(); track $index) {\r\n\r\n @if (seg.type === 'column') {\r\n <th class=\"b-table\" rowspan=\"2\"\r\n [style.width]=\"seg.column?.width ? seg.column.width + 'px' : 'auto'\">\r\n {{ seg.column?.caption }}\r\n </th>\r\n }\r\n\r\n @if (seg.type === 'group') {\r\n <th class=\"b-table text-center fw-bold\" [attr.colspan]=\"seg.group?.colspan\">\r\n {{ seg.group?.label }}\r\n </th>\r\n }\r\n\r\n }\r\n </tr>\r\n\r\n <tr class=\"shadow-sm\">\r\n @for (column of groupedColumns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i\r\n [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n } @else {\r\n\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i\r\n [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n }\r\n\r\n <tbody>\r\n @for (row of dataVirtual(); track row.idListTsi) {\r\n @let idList = row.idListTsi;\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <label>\r\n <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n [disabled]=\"isCheckboxDisabled(row)\">\r\n </label>\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }@else {\r\n @switch (column.tipo) {\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"b-table {{getPosition(column)}}\">\r\n </td>\r\n }\r\n }\r\n\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n <tr #anchor>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"text-center text-muted py-3\">\r\n @if (isLoading()) {\r\n <span>Cargando m\u00E1s registros...</span>\r\n }\r\n @if (!isLoading() && dataVirtual().length >= 5000) {\r\n <span>No hay m\u00E1s registros</span>\r\n }\r\n </td>\r\n </tr>\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media(max-width:1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }], animations: [fadeInOut, dropdownAnimation] });
|
|
4981
4983
|
}
|
|
4982
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4984
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TableAgrupadaComponent, decorators: [{
|
|
4983
4985
|
type: Component,
|
|
4984
|
-
args: [{ selector: 'app-table-agrupada', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent, AnimatedCheckboxDirective], animations: [fadeInOut, dropdownAnimation], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n\r\n @if (hasColumnGroups()) {\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n </th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th rowspan=\"2\" class=\"cw-40 b-table\">\r\n </th>\r\n }\r\n\r\n @for (seg of headerSegments(); track $index) {\r\n\r\n @if (seg.type === 'column') {\r\n <th class=\"b-table\" rowspan=\"2\"\r\n [style.width]=\"seg.column?.width ? seg.column.width + 'px' : 'auto'\">\r\n {{ seg.column?.caption }}\r\n </th>\r\n }\r\n\r\n @if (seg.type === 'group') {\r\n <th class=\"b-table text-center fw-bold\" [attr.colspan]=\"seg.group?.colspan\">\r\n {{ seg.group?.label }}\r\n </th>\r\n }\r\n\r\n }\r\n </tr>\r\n\r\n <tr class=\"shadow-sm\">\r\n @for (column of groupedColumns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i\r\n [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n } @else {\r\n\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i\r\n [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n }\r\n\r\n <tbody>\r\n @for (row of dataVirtual(); track row.idListTsi) {\r\n @let idList = row.idListTsi;\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <label>\r\n <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n [disabled]=\"isCheckboxDisabled(row)\">\r\n </label>\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }@else {\r\n @switch (column.tipo) {\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"b-table {{getPosition(column)}}\">\r\n </td>\r\n }\r\n }\r\n\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n <tr #anchor>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"text-center text-muted py-3\">\r\n @if (isLoading()) {\r\n <span>Cargando m\u00E1s registros...</span>\r\n }\r\n @if (!isLoading() && dataVirtual().length >= 5000) {\r\n <span>No hay m\u00E1s registros</span>\r\n }\r\n </td>\r\n </tr>\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
|
|
4986
|
+
args: [{ selector: 'app-table-agrupada', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent, AnimatedCheckboxDirective], animations: [fadeInOut, dropdownAnimation], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center\">\r\n <label class=\"form-label me-2 pt-2\">Buscar</label>\r\n <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn btn-dark boton-buscar fs-7\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #content>\r\n <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">\r\n Filtros\r\n </div>\r\n\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input class=\"form-check-input py-0 my-0 cw-25 ch-15\" type=\"checkbox\" [checked]=\"true\"\r\n (change)=\"toggleFiltros($event)\" />\r\n <label class=\"form-check-label ps-2 fs-6 mb-0 cursor-pointer\">\r\n Todos\r\n </label>\r\n </div>\r\n\r\n @for (col of columns(); track col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'filter_' + col.caption }}\" [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer mb-0\" for=\"{{ 'filter_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n <div class=\"table-container table-responsive\"\r\n [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n <div>\r\n <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n\r\n @if (hasColumnGroups()) {\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n </th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th rowspan=\"2\" class=\"cw-20 b-table\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th rowspan=\"2\" class=\"cw-40 b-table\">\r\n </th>\r\n }\r\n\r\n @for (seg of headerSegments(); track $index) {\r\n\r\n @if (seg.type === 'column') {\r\n <th class=\"b-table\" rowspan=\"2\"\r\n [style.width]=\"seg.column?.width ? seg.column.width + 'px' : 'auto'\">\r\n {{ seg.column?.caption }}\r\n </th>\r\n }\r\n\r\n @if (seg.type === 'group') {\r\n <th class=\"b-table text-center fw-bold\" [attr.colspan]=\"seg.group?.colspan\">\r\n {{ seg.group?.label }}\r\n </th>\r\n }\r\n\r\n }\r\n </tr>\r\n\r\n <tr class=\"shadow-sm\">\r\n @for (column of groupedColumns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i\r\n [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n } @else {\r\n\r\n <thead>\r\n <tr class=\"shadow-sm\">\r\n @if (withDetails()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n <label>\r\n <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n (change)=\"allCheck($event)\">\r\n </label>\r\n </th>\r\n }\r\n\r\n @if (customActions()) {\r\n <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n <app-dropdown-cdk>\r\n <ng-template #trigger>\r\n <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </ng-template>\r\n <ng-template #content>\r\n <div class=\"popover-menu-column bg-white shadow mt-2\" @dropdownAnimation>\r\n <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n @for (col of columns(); track col.caption) {\r\n @if (col.caption) {\r\n <div class=\"form-check form-switch text-start d-flex align-items-center\">\r\n <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n id=\"{{ 'switch_' + col.caption }}\"\r\n [(ngModel)]=\"visibilidadColumn()[col.fieldname]\" />\r\n <label class=\"form-check-label ps-2 fs-6 cursor-pointer font-label mb-0\"\r\n for=\"{{ 'switch_' + col.caption }}\">\r\n {{ col.caption }}\r\n </label>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </ng-template>\r\n </app-dropdown-cdk>\r\n </th>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n {{ column.caption }}\r\n @if(column.caption){\r\n @if (sortColumn == column.fieldname) {\r\n <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n <i\r\n [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n </span>\r\n }\r\n @if (sortColumn !== column.fieldname) {\r\n <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n }\r\n }\r\n </th>\r\n }\r\n }\r\n </tr>\r\n </thead>\r\n\r\n }\r\n\r\n <tbody>\r\n @for (row of dataVirtual(); track row.idListTsi) {\r\n @let idList = row.idListTsi;\r\n <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n @if (withDetails()) {\r\n <td class=\"b-table text-center mwp-25\">\r\n <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n </a>\r\n </td>\r\n }\r\n\r\n @if (withCheckbox()) {\r\n <td scope=\"col\" class=\"text-center b-table\">\r\n <label>\r\n <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n [disabled]=\"isCheckboxDisabled(row)\">\r\n </label>\r\n </td>\r\n }\r\n\r\n @if (customActions()) {\r\n <td class=\"text-center mwp-90 b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n </td>\r\n }\r\n @for (column of columns(); track $index) {\r\n @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.fieldname] !== false) {\r\n\r\n @if (column.template) {\r\n <td class=\"b-table\">\r\n <ng-container\r\n *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n </ng-container>\r\n </td>\r\n }@else {\r\n @switch (column.tipo) {\r\n @case ('cell-render') {\r\n @let resolverItem = resolveCell(column.fieldname, row);\r\n @if (resolverItem) {\r\n <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n @if (resolverItem.icon) {\r\n <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n } @else if (resolverItem.class) {\r\n <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n {{ resolverItem.text }}\r\n </span>\r\n } @else {\r\n {{ resolverItem.text }}\r\n }\r\n </td>\r\n }\r\n }\r\n\r\n @default {\r\n <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n [style.width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [style.max-width]=\"column?.width ? column.width + 'px' : 'auto'\"\r\n [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n class=\"b-table {{getPosition(column)}}\">\r\n </td>\r\n }\r\n }\r\n\r\n }\r\n }\r\n }\r\n </tr>\r\n @if ($index == expandedRows) {\r\n <tr @fadeInOut>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"table-blank\">\r\n <div class=\"d-flex flex-column auditoria\">\r\n <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n row.hcreac }}\r\n </span>\r\n <span class=\"fs-6 text-dark fw-bold\">\r\n Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n {{\r\n row.hactua }}\r\n </span>\r\n </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n <tr #anchor>\r\n <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n class=\"text-center text-muted py-3\">\r\n @if (isLoading()) {\r\n <span>Cargando m\u00E1s registros...</span>\r\n }\r\n @if (!isLoading() && dataVirtual().length >= 5000) {\r\n <span>No hay m\u00E1s registros</span>\r\n }\r\n </td>\r\n </tr>\r\n </tbody>\r\n\r\n @if (withTotal()) {\r\n <tfoot>\r\n <tr>\r\n <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n @for (col of columns() ; track $index) {\r\n @if (col.totalizable) {\r\n <td class=\"b-table text-end\">\r\n {{ getTotals(col.fieldname)}}\r\n </td>\r\n }\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media(max-width:1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media(max-width:1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
|
|
4985
4987
|
}], ctorParameters: () => [], propDecorators: { onResize: [{
|
|
4986
4988
|
type: HostListener,
|
|
4987
4989
|
args: ['window:resize', ['$event']]
|
|
@@ -4991,10 +4993,10 @@ class TabItemComponent {
|
|
|
4991
4993
|
id = input();
|
|
4992
4994
|
title = input('');
|
|
4993
4995
|
content = contentChild(TemplateRef);
|
|
4994
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
4995
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.
|
|
4996
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4997
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.25", type: TabItemComponent, isStandalone: true, selector: "app-tab-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true });
|
|
4996
4998
|
}
|
|
4997
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
4999
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TabItemComponent, decorators: [{
|
|
4998
5000
|
type: Component,
|
|
4999
5001
|
args: [{
|
|
5000
5002
|
selector: 'app-tab-item',
|
|
@@ -5008,12 +5010,12 @@ class NavTabsComponent {
|
|
|
5008
5010
|
tabItems = contentChildren(TabItemComponent);
|
|
5009
5011
|
active = model(1);
|
|
5010
5012
|
isDestroy = input(true);
|
|
5011
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5012
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
5013
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NavTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5014
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: NavTabsComponent, isStandalone: true, selector: "app-nav-tabs", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isDestroy: { classPropertyName: "isDestroy", publicName: "isDestroy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange" }, queries: [{ propertyName: "tabItems", predicate: TabItemComponent, isSignal: true }], ngImport: i0, template: "<ul ngbNav #nav=\"ngbNav\" [(activeId)]=\"active\" class=\"nav nav-tabs\" [destroyOnHide]=\"isDestroy()\">\r\n @for (tab of tabItems(); track $index) {\r\n <li [ngbNavItem]=\"tab.id()\">\r\n <button ngbNavLink>{{ tab.title() }}</button>\r\n <ng-template ngbNavContent>\r\n <ng-container *ngTemplateOutlet=\"tab.content()\"></ng-container>\r\n </ng-template>\r\n </li>\r\n }\r\n \r\n</ul>\r\n<div [ngbNavOutlet]=\"nav\" class=\"mt-2\"></div>", styles: [".nav-link{font-size:12px!important;font-weight:600!important}.nav-tabs .nav-item{font-weight:700}.nav-tabs .nav-item .nav-link{color:#909090!important;border-top-left-radius:10px;border-top-right-radius:10px}.nav-tabs .nav-item .nav-link:before{content:attr(data-label)}.nav-tabs .nav-item .nav-link:hover{background-color:#dedede48!important}.nav-tabs .nav-item .nav-link.active{color:#1c1c1c!important}.tab-content-wrapper{border:1px solid #6e7379;border-top:none;border-radius:0 0 10px 10px;padding:1.5rem;margin-top:0!important}@media(max-width:768px){.nav-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#888 #e0e0e0}.nav-tabs .nav-item{flex:0 0 auto;position:relative}.nav-tabs .nav-item .nav-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px 10px 0 0;font-size:0!important;color:#2c2c2c;padding:0!important;transition:all .3s ease;position:relative;overflow:hidden;z-index:1}.nav-tabs .nav-item .nav-link:before{content:\"\";width:10px;height:10px;background-color:#636363;border-radius:50%;display:block;transition:opacity .3s ease}.nav-tabs .nav-item .nav-link.active{width:auto;padding:.5rem 1rem!important;font-size:12px!important;z-index:2}.nav-tabs .nav-item .nav-link.active:before{width:auto;height:auto;background:none;border-radius:0;font-size:12px;color:#fff}.nav-tabs .nav-item .nav-link:focus{outline:none}}\n"], dependencies: [{ kind: "ngmodule", type: NgbNavModule }, { kind: "directive", type: i1.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i1.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i1.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i1.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i1.NgbNavLinkButton, selector: "button[ngbNavLink]" }, { kind: "directive", type: i1.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i1.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
5013
5015
|
}
|
|
5014
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5016
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NavTabsComponent, decorators: [{
|
|
5015
5017
|
type: Component,
|
|
5016
|
-
args: [{ selector: 'app-nav-tabs', imports: [NgbNavModule, CommonModule], template: "<ul ngbNav #nav=\"ngbNav\" [(activeId)]=\"active\" class=\"nav nav-tabs\" [destroyOnHide]=\"isDestroy()\">\r\n @for (tab of tabItems(); track $index) {\r\n <li [ngbNavItem]=\"tab.id()\">\r\n <button ngbNavLink>{{ tab.title() }}</button>\r\n <ng-template ngbNavContent>\r\n <ng-container *ngTemplateOutlet=\"tab.content()\"></ng-container>\r\n </ng-template>\r\n </li>\r\n }\r\n \r\n</ul>\r\n<div [ngbNavOutlet]=\"nav\" class=\"mt-2\"></div>", styles: [".nav-link{font-size:12px!important;font-weight:600!important}.nav-tabs .nav-item{font-weight:700}.nav-tabs .nav-item .nav-link{color:#909090!important;border-top-left-radius:10px;border-top-right-radius:10px}.nav-tabs .nav-item .nav-link:before{content:attr(data-label)}.nav-tabs .nav-item .nav-link:hover{background-color:#dedede48!important}.nav-tabs .nav-item .nav-link.active{color:#1c1c1c!important}.tab-content-wrapper{border:1px solid #6e7379;border-top:none;border-radius:0 0 10px 10px;padding:1.5rem;margin-top:0!important}@media
|
|
5018
|
+
args: [{ selector: 'app-nav-tabs', imports: [NgbNavModule, CommonModule], template: "<ul ngbNav #nav=\"ngbNav\" [(activeId)]=\"active\" class=\"nav nav-tabs\" [destroyOnHide]=\"isDestroy()\">\r\n @for (tab of tabItems(); track $index) {\r\n <li [ngbNavItem]=\"tab.id()\">\r\n <button ngbNavLink>{{ tab.title() }}</button>\r\n <ng-template ngbNavContent>\r\n <ng-container *ngTemplateOutlet=\"tab.content()\"></ng-container>\r\n </ng-template>\r\n </li>\r\n }\r\n \r\n</ul>\r\n<div [ngbNavOutlet]=\"nav\" class=\"mt-2\"></div>", styles: [".nav-link{font-size:12px!important;font-weight:600!important}.nav-tabs .nav-item{font-weight:700}.nav-tabs .nav-item .nav-link{color:#909090!important;border-top-left-radius:10px;border-top-right-radius:10px}.nav-tabs .nav-item .nav-link:before{content:attr(data-label)}.nav-tabs .nav-item .nav-link:hover{background-color:#dedede48!important}.nav-tabs .nav-item .nav-link.active{color:#1c1c1c!important}.tab-content-wrapper{border:1px solid #6e7379;border-top:none;border-radius:0 0 10px 10px;padding:1.5rem;margin-top:0!important}@media(max-width:768px){.nav-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#888 #e0e0e0}.nav-tabs .nav-item{flex:0 0 auto;position:relative}.nav-tabs .nav-item .nav-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px 10px 0 0;font-size:0!important;color:#2c2c2c;padding:0!important;transition:all .3s ease;position:relative;overflow:hidden;z-index:1}.nav-tabs .nav-item .nav-link:before{content:\"\";width:10px;height:10px;background-color:#636363;border-radius:50%;display:block;transition:opacity .3s ease}.nav-tabs .nav-item .nav-link.active{width:auto;padding:.5rem 1rem!important;font-size:12px!important;z-index:2}.nav-tabs .nav-item .nav-link.active:before{width:auto;height:auto;background:none;border-radius:0;font-size:12px;color:#fff}.nav-tabs .nav-item .nav-link:focus{outline:none}}\n"] }]
|
|
5017
5019
|
}] });
|
|
5018
5020
|
|
|
5019
5021
|
class MdGenericoComponent {
|
|
@@ -5052,10 +5054,10 @@ class MdGenericoComponent {
|
|
|
5052
5054
|
}
|
|
5053
5055
|
this.modalService.dismiss();
|
|
5054
5056
|
}
|
|
5055
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5056
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
5057
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MdGenericoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5058
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showCancelar: { classPropertyName: "showCancelar", publicName: "showCancelar", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, acceptDisabled: { classPropertyName: "acceptDisabled", publicName: "acceptDisabled", isSignal: true, isRequired: false, transformFunction: null }, validaCierre: { classPropertyName: "validaCierre", publicName: "validaCierre", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", cerrar: "cerrar", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"md-inner\">\r\n <div class=\"modal-header py-2\">\r\n <div class=\"w-100\">\r\n <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\"\r\n [showAlerta]=\"showAlerta()\" [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\"\r\n [hasData]=\"dataFiltro()\" [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n </div>\r\n\r\n @if( showFooter()){\r\n <div class=\"modal-footer\">\r\n @if (footer()) {\r\n <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n }\r\n @if (type() == '1') {\r\n <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\"\r\n [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '2') {\r\n <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\"\r\n [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '3') {\r\n <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\"\r\n [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '4'){\r\n <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\"\r\n [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '6'){\r\n <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\"\r\n [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if(showCancelar()){\r\n <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n }\r\n </div>\r\n }\r\n\r\n @if( type() == 'APROB'){\r\n <div class=\"modal-footer d-flex justify-content-center\">\r\n <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n </div>\r\n }\r\n</div>", styles: [".md-inner{display:grid;grid-template-rows:auto 1fr auto;height:fit-content;max-height:calc(100dvh - var(--bs-modal-margin) * 2 - 2px);overflow:hidden}.max-height{overflow-y:auto;min-height:0}.modal-body{overflow-x:auto!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["title", "tamanio", "showFiltro", "withFiltro", "hasData", "isModal", "showAlerta", "textAlerta", "validateSalto"], outputs: ["withFiltroChange", "cerrarModal"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "variante", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isMultiple", "isRounded", "isNotStyle", "isFullWidth", "paddingX", "paddingY", "minWidth"], outputs: ["accion", "fileSelected"] }] });
|
|
5057
5059
|
}
|
|
5058
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MdGenericoComponent, decorators: [{
|
|
5059
5061
|
type: Component,
|
|
5060
5062
|
args: [{ selector: 'app-md-generico', imports: [NgClass, NgTemplateOutlet, HeaderComponent, ButtonComponent], template: "<div class=\"md-inner\">\r\n <div class=\"modal-header py-2\">\r\n <div class=\"w-100\">\r\n <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\"\r\n [showAlerta]=\"showAlerta()\" [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\"\r\n [hasData]=\"dataFiltro()\" [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n </div>\r\n\r\n <div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n </div>\r\n\r\n @if( showFooter()){\r\n <div class=\"modal-footer\">\r\n @if (footer()) {\r\n <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n }\r\n @if (type() == '1') {\r\n <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\"\r\n [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '2') {\r\n <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\"\r\n [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if (type() == '3') {\r\n <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\"\r\n [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '4'){\r\n <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\"\r\n [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if( type() == '6'){\r\n <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\"\r\n [disabled]=\"acceptDisabled()\" />\r\n }\r\n @if(showCancelar()){\r\n <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n }\r\n </div>\r\n }\r\n\r\n @if( type() == 'APROB'){\r\n <div class=\"modal-footer d-flex justify-content-center\">\r\n <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n </div>\r\n }\r\n</div>", styles: [".md-inner{display:grid;grid-template-rows:auto 1fr auto;height:fit-content;max-height:calc(100dvh - var(--bs-modal-margin) * 2 - 2px);overflow:hidden}.max-height{overflow-y:auto;min-height:0}.modal-body{overflow-x:auto!important}\n"] }]
|
|
5061
5063
|
}] });
|
|
@@ -5256,10 +5258,10 @@ class AlertService {
|
|
|
5256
5258
|
this.showErrorAlert(`${msg} <br> ${err.error}`);
|
|
5257
5259
|
return throwError(() => err);
|
|
5258
5260
|
});
|
|
5259
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5260
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
5261
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5262
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertService, providedIn: 'root' });
|
|
5261
5263
|
}
|
|
5262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertService, decorators: [{
|
|
5263
5265
|
type: Injectable,
|
|
5264
5266
|
args: [{
|
|
5265
5267
|
providedIn: 'root'
|
|
@@ -5383,10 +5385,10 @@ class AlertConfirmationService {
|
|
|
5383
5385
|
const result = await Swal.fire(options);
|
|
5384
5386
|
return result.isConfirmed;
|
|
5385
5387
|
}
|
|
5386
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5387
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
5388
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5389
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertConfirmationService, providedIn: 'root' });
|
|
5388
5390
|
}
|
|
5389
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertConfirmationService, decorators: [{
|
|
5390
5392
|
type: Injectable,
|
|
5391
5393
|
args: [{
|
|
5392
5394
|
providedIn: 'root',
|
|
@@ -5410,10 +5412,10 @@ class AlertErrorService {
|
|
|
5410
5412
|
async mostrarModalError(mensaje, status) {
|
|
5411
5413
|
return this.open(mensaje, status);
|
|
5412
5414
|
}
|
|
5413
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
5414
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
5415
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertErrorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5416
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertErrorService, providedIn: 'root' });
|
|
5415
5417
|
}
|
|
5416
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
5418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlertErrorService, decorators: [{
|
|
5417
5419
|
type: Injectable,
|
|
5418
5420
|
args: [{
|
|
5419
5421
|
providedIn: 'root',
|