ngx-dsxlibrary 2.21.57 → 2.21.59
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/ngx-dsxlibrary-src-lib-components.mjs +31 -22
- package/fesm2022/ngx-dsxlibrary-src-lib-components.mjs.map +1 -1
- package/fesm2022/ngx-dsxlibrary.mjs +725 -167
- package/fesm2022/ngx-dsxlibrary.mjs.map +1 -1
- package/ngx-dsxlibrary-2.21.59.tgz +0 -0
- package/package.json +1 -1
- package/types/ngx-dsxlibrary-src-lib-components.d.ts +4 -1
- package/types/ngx-dsxlibrary.d.ts +165 -56
- package/ngx-dsxlibrary-2.21.57.tgz +0 -0
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import * as i1$2 from '@angular/common';
|
|
2
|
-
import { DecimalPipe, CommonModule } from '@angular/common';
|
|
3
1
|
import * as i0 from '@angular/core';
|
|
4
2
|
import { Input, Component, input, forwardRef, viewChild, signal, EventEmitter, effect, Output, model, inject, computed } from '@angular/core';
|
|
5
3
|
import * as i1 from 'primeng/tag';
|
|
@@ -9,6 +7,8 @@ import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
|
9
7
|
import * as i2 from 'primeng/togglebutton';
|
|
10
8
|
import { ToggleButtonModule } from 'primeng/togglebutton';
|
|
11
9
|
import { FileUpload } from 'primeng/fileupload';
|
|
10
|
+
import * as i1$2 from '@angular/common';
|
|
11
|
+
import { CommonModule } from '@angular/common';
|
|
12
12
|
import * as i2$1 from 'primeng/tree';
|
|
13
13
|
import { TreeModule } from 'primeng/tree';
|
|
14
14
|
import * as i3 from 'primeng/api';
|
|
@@ -37,10 +37,10 @@ import { TabsModule } from 'primeng/tabs';
|
|
|
37
37
|
class AppMessageErrorComponent {
|
|
38
38
|
elementRef;
|
|
39
39
|
renderer;
|
|
40
|
-
//
|
|
41
|
-
defaultFloatLabelErrorSpace = '2.1rem
|
|
42
|
-
templateFloatLabelErrorSpace = '2.1rem
|
|
43
|
-
templateFloatLabelLongErrorSpace = '
|
|
40
|
+
// Modifica únicamente estas variables al inicio de tu clase en el archivo .ts
|
|
41
|
+
defaultFloatLabelErrorSpace = '1.3rem'; // Reducido de 2.1rem a 1.3rem
|
|
42
|
+
templateFloatLabelErrorSpace = '1.3rem'; // Reducido de 2.1rem a 1.3rem
|
|
43
|
+
templateFloatLabelLongErrorSpace = '2.4rem'; // Reducido de 3.4rem a 2.4rem
|
|
44
44
|
templateLongErrorThreshold = 165;
|
|
45
45
|
// Referencia al contenedor PrimeNG padre, si existe.
|
|
46
46
|
floatLabelElement = null;
|
|
@@ -49,13 +49,16 @@ class AppMessageErrorComponent {
|
|
|
49
49
|
// Evita escrituras de estilo repetidas cuando el estado de visibilidad no cambia.
|
|
50
50
|
lastAppliedVisibleState = false;
|
|
51
51
|
lastAppliedErrorSpace = '';
|
|
52
|
+
// Historial de estados para evitar ejecuciones innecesarias en ngDoCheck
|
|
53
|
+
lastControlStatus = '';
|
|
54
|
+
lastControlTouched = false;
|
|
55
|
+
lastControlDirty = false;
|
|
56
|
+
control = null;
|
|
57
|
+
form = null;
|
|
52
58
|
constructor(elementRef, renderer) {
|
|
53
59
|
this.elementRef = elementRef;
|
|
54
60
|
this.renderer = renderer;
|
|
55
61
|
}
|
|
56
|
-
// Control de formulario que se pasa como input.
|
|
57
|
-
control = null;
|
|
58
|
-
form = null;
|
|
59
62
|
ngAfterViewInit() {
|
|
60
63
|
// Busca el FloatLabel mas cercano para ajustar su separacion inferior.
|
|
61
64
|
this.floatLabelElement = this.elementRef.nativeElement.closest('.p-floatlabel');
|
|
@@ -66,13 +69,21 @@ class AppMessageErrorComponent {
|
|
|
66
69
|
}
|
|
67
70
|
}
|
|
68
71
|
ngDoCheck() {
|
|
69
|
-
|
|
70
|
-
|
|
72
|
+
if (!this.control)
|
|
73
|
+
return;
|
|
74
|
+
// OPTIMIZACIÓN: Detiene la ejecución si el cambio en el modal no afectó las propiedades del control
|
|
75
|
+
if (this.control.status !== this.lastControlStatus ||
|
|
76
|
+
this.control.touched !== this.lastControlTouched ||
|
|
77
|
+
this.control.dirty !== this.lastControlDirty) {
|
|
78
|
+
this.lastControlStatus = this.control.status;
|
|
79
|
+
this.lastControlTouched = this.control.touched;
|
|
80
|
+
this.lastControlDirty = this.control.dirty;
|
|
81
|
+
this.syncFloatLabelSpacing();
|
|
82
|
+
}
|
|
71
83
|
}
|
|
72
84
|
ngOnDestroy() {
|
|
73
|
-
if (!this.floatLabelElement)
|
|
85
|
+
if (!this.floatLabelElement)
|
|
74
86
|
return;
|
|
75
|
-
}
|
|
76
87
|
if (this.previousInlineMarginBottom) {
|
|
77
88
|
this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.previousInlineMarginBottom);
|
|
78
89
|
return;
|
|
@@ -80,9 +91,8 @@ class AppMessageErrorComponent {
|
|
|
80
91
|
this.renderer.removeStyle(this.floatLabelElement, 'margin-bottom');
|
|
81
92
|
}
|
|
82
93
|
syncFloatLabelSpacing() {
|
|
83
|
-
if (!this.floatLabelElement)
|
|
94
|
+
if (!this.floatLabelElement)
|
|
84
95
|
return;
|
|
85
|
-
}
|
|
86
96
|
const isVisible = this.isControlErrorVisible();
|
|
87
97
|
const desiredSpace = this.getFloatLabelErrorSpace();
|
|
88
98
|
if (isVisible === this.lastAppliedVisibleState &&
|
|
@@ -102,14 +112,13 @@ class AppMessageErrorComponent {
|
|
|
102
112
|
}
|
|
103
113
|
this.renderer.removeStyle(this.floatLabelElement, 'margin-bottom');
|
|
104
114
|
}
|
|
115
|
+
// CORRECCIÓN: El error solo se activa si el campo es inválido Y el usuario interactuó con él
|
|
105
116
|
isControlErrorVisible() {
|
|
106
|
-
if (!this.control
|
|
117
|
+
if (!this.control || !this.control.invalid) {
|
|
107
118
|
return false;
|
|
108
119
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
}
|
|
112
|
-
return !!this.control.touched;
|
|
120
|
+
// Condición unificada: requiere interacción real (touched o dirty) para pintarse de rojo
|
|
121
|
+
return !!(this.control.touched || this.control.dirty);
|
|
113
122
|
}
|
|
114
123
|
getFloatLabelErrorSpace() {
|
|
115
124
|
const templateError = this.control?.errors?.['invalidTemplateVariables'] ||
|
|
@@ -134,11 +143,11 @@ class AppMessageErrorComponent {
|
|
|
134
143
|
return num % 1 === 0 ? String(num) : parseFloat(num.toFixed(2)).toString();
|
|
135
144
|
}
|
|
136
145
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AppMessageErrorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
137
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AppMessageErrorComponent, isStandalone: true, selector: "app-message-error", inputs: { control: "control", form: "form" }, ngImport: i0, template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n
|
|
146
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AppMessageErrorComponent, isStandalone: true, selector: "app-message-error", inputs: { control: "control", form: "form" }, ngImport: i0, template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n <div class=\"dsx-error-message\">\r\n <div class=\"dsx-error-message-content\">\r\n <i\r\n class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n\r\n @if (control?.errors?.[\"required\"]) {\r\n El campo <strong>es requerido.</strong>\r\n } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"invalidDate\"]) {\r\n <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"minimumAge\"]) {\r\n <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"minlength\"]) {\r\n Debe tener al menos\r\n <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n caracteres.\r\n } @else if (control?.errors?.[\"maxlength\"]) {\r\n Debe tener como m\u00E1ximo\r\n <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n caracteres.\r\n } @else if (control?.errors?.[\"min\"]) {\r\n El valor m\u00EDnimo permitido es\r\n <strong>{{ formatNumber(control?.errors?.[\"min\"]?.min) }}</strong>\r\n } @else if (control?.errors?.[\"max\"]) {\r\n El valor m\u00E1ximo permitido es\r\n <strong>{{ formatNumber(control?.errors?.[\"max\"]?.max) }}</strong>\r\n } @else if (control?.errors?.[\"email\"]) {\r\n Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n } @else if (control?.errors?.[\"pattern\"]) {\r\n El campo no tiene el formato requerido.\r\n } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n <div class=\"dsx-template-error\">\r\n <strong>\r\n {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n </strong>\r\n @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n <span class=\"dsx-template-error-detail\">\r\n {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n </span>\r\n }\r\n </div>\r\n } @else if (control?.errors?.[\"invalidTemplateStructure\"]) {\r\n <div class=\"dsx-template-error\">\r\n <strong>\r\n {{ control?.errors?.[\"invalidTemplateStructure\"]?.message }}\r\n </strong>\r\n @if (control?.errors?.[\"invalidTemplateStructure\"]?.details?.length) {\r\n <span class=\"dsx-template-error-detail\">\r\n {{ control?.errors?.[\"invalidTemplateStructure\"]?.details?.[0] }}\r\n </span>\r\n }\r\n </div>\r\n } @else {\r\n Existe un error a\u00FAn no identificado.\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Mensaje para formulario en general (Cambiado form.touched por form.dirty para evitar falsos positivos al clicar el fondo) -->\r\n@if (form?.invalid && form?.dirty) {\r\n <div class=\"mt-2 mb-2\">\r\n @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n <p-tag severity=\"danger\" [rounded]=\"true\">\r\n {{ form?.getError(\"atLeastOneRequired\")?.message }}\r\n </p-tag>\r\n }\r\n </div>\r\n}\r\n", styles: [":host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:10;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{display:block;max-height:none;overflow:visible;margin-top:.15rem;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-error-message-content{display:flex;align-items:center;gap:.3rem;width:100%;box-sizing:border-box;padding-left:.35rem;font-size:.875rem;background:var(--dsx-error-bg, #fff2f0)!important;color:var(--dsx-error-color, #b42318)!important;border-left:3px solid var(--dsx-error-color, #b42318)!important;box-shadow:0 2px 4px #00000014}:host-context(.p-floatlabel) .dsx-error-icon{flex:0 0 auto;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] });
|
|
138
147
|
}
|
|
139
148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AppMessageErrorComponent, decorators: [{
|
|
140
149
|
type: Component,
|
|
141
|
-
args: [{ selector: 'app-message-error', imports: [TagModule
|
|
150
|
+
args: [{ selector: 'app-message-error', imports: [TagModule], template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n <div class=\"dsx-error-message\">\r\n <div class=\"dsx-error-message-content\">\r\n <i\r\n class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\r\n\r\n @if (control?.errors?.[\"required\"]) {\r\n El campo <strong>es requerido.</strong>\r\n } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"invalidDate\"]) {\r\n <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"minimumAge\"]) {\r\n <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"minlength\"]) {\r\n Debe tener al menos\r\n <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n caracteres.\r\n } @else if (control?.errors?.[\"maxlength\"]) {\r\n Debe tener como m\u00E1ximo\r\n <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n caracteres.\r\n } @else if (control?.errors?.[\"min\"]) {\r\n El valor m\u00EDnimo permitido es\r\n <strong>{{ formatNumber(control?.errors?.[\"min\"]?.min) }}</strong>\r\n } @else if (control?.errors?.[\"max\"]) {\r\n El valor m\u00E1ximo permitido es\r\n <strong>{{ formatNumber(control?.errors?.[\"max\"]?.max) }}</strong>\r\n } @else if (control?.errors?.[\"email\"]) {\r\n Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n } @else if (control?.errors?.[\"pattern\"]) {\r\n El campo no tiene el formato requerido.\r\n } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n <div class=\"dsx-template-error\">\r\n <strong>\r\n {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n </strong>\r\n @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n <span class=\"dsx-template-error-detail\">\r\n {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n </span>\r\n }\r\n </div>\r\n } @else if (control?.errors?.[\"invalidTemplateStructure\"]) {\r\n <div class=\"dsx-template-error\">\r\n <strong>\r\n {{ control?.errors?.[\"invalidTemplateStructure\"]?.message }}\r\n </strong>\r\n @if (control?.errors?.[\"invalidTemplateStructure\"]?.details?.length) {\r\n <span class=\"dsx-template-error-detail\">\r\n {{ control?.errors?.[\"invalidTemplateStructure\"]?.details?.[0] }}\r\n </span>\r\n }\r\n </div>\r\n } @else {\r\n Existe un error a\u00FAn no identificado.\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Mensaje para formulario en general (Cambiado form.touched por form.dirty para evitar falsos positivos al clicar el fondo) -->\r\n@if (form?.invalid && form?.dirty) {\r\n <div class=\"mt-2 mb-2\">\r\n @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n <p-tag severity=\"danger\" [rounded]=\"true\">\r\n {{ form?.getError(\"atLeastOneRequired\")?.message }}\r\n </p-tag>\r\n }\r\n </div>\r\n}\r\n", styles: [":host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:10;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{display:block;max-height:none;overflow:visible;margin-top:.15rem;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-error-message-content{display:flex;align-items:center;gap:.3rem;width:100%;box-sizing:border-box;padding-left:.35rem;font-size:.875rem;background:var(--dsx-error-bg, #fff2f0)!important;color:var(--dsx-error-color, #b42318)!important;border-left:3px solid var(--dsx-error-color, #b42318)!important;box-shadow:0 2px 4px #00000014}:host-context(.p-floatlabel) .dsx-error-icon{flex:0 0 auto;line-height:1}\n"] }]
|
|
142
151
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { control: [{
|
|
143
152
|
type: Input
|
|
144
153
|
}], form: [{
|