ngx-dsxlibrary 2.21.47 → 2.21.49
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 +113 -25
- package/fesm2022/ngx-dsxlibrary-src-lib-components.mjs.map +1 -1
- package/fesm2022/ngx-dsxlibrary-src-lib-primengdsx.mjs +61 -0
- package/fesm2022/ngx-dsxlibrary-src-lib-primengdsx.mjs.map +1 -0
- package/fesm2022/ngx-dsxlibrary.mjs +778 -77
- package/fesm2022/ngx-dsxlibrary.mjs.map +1 -1
- package/ngx-dsxlibrary-2.21.49.tgz +0 -0
- package/package.json +5 -1
- package/src/assets/css/primeng_dsx_fieldset.css +56 -0
- package/src/assets/css/{primeng_dsx.css → primeng_dsx_table.css} +10 -0
- package/types/ngx-dsxlibrary-src-lib-components.d.ts +8 -3
- package/types/ngx-dsxlibrary-src-lib-primengdsx.d.ts +20 -0
- package/types/ngx-dsxlibrary.d.ts +191 -18
- package/ngx-dsxlibrary-2.21.47.tgz +0 -0
|
@@ -38,8 +38,10 @@ class AppMessageErrorComponent {
|
|
|
38
38
|
elementRef;
|
|
39
39
|
renderer;
|
|
40
40
|
// Espacio vertical reservado bajo el float label cuando hay error visible.
|
|
41
|
-
defaultFloatLabelErrorSpace = '
|
|
42
|
-
templateFloatLabelErrorSpace = '
|
|
41
|
+
defaultFloatLabelErrorSpace = '2.1rem';
|
|
42
|
+
templateFloatLabelErrorSpace = '2.1rem';
|
|
43
|
+
templateFloatLabelLongErrorSpace = '3.4rem';
|
|
44
|
+
templateLongErrorThreshold = 165;
|
|
43
45
|
// Referencia al contenedor PrimeNG padre, si existe.
|
|
44
46
|
floatLabelElement = null;
|
|
45
47
|
// Se conserva el estilo inline original para restaurarlo al ocultar/destruir.
|
|
@@ -110,17 +112,33 @@ class AppMessageErrorComponent {
|
|
|
110
112
|
return !!this.control.touched;
|
|
111
113
|
}
|
|
112
114
|
getFloatLabelErrorSpace() {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
+
const templateError = this.control?.errors?.['invalidTemplateVariables'] ||
|
|
116
|
+
this.control?.errors?.['invalidTemplateStructure'];
|
|
117
|
+
if (templateError) {
|
|
118
|
+
const errorData = templateError;
|
|
119
|
+
const firstDetail = Array.isArray(errorData.details)
|
|
120
|
+
? (errorData.details[0] ?? '')
|
|
121
|
+
: '';
|
|
122
|
+
const messageLength = `${errorData.message ?? ''} ${firstDetail}`.trim()
|
|
123
|
+
.length;
|
|
124
|
+
return messageLength > this.templateLongErrorThreshold
|
|
125
|
+
? this.templateFloatLabelLongErrorSpace
|
|
126
|
+
: this.templateFloatLabelErrorSpace;
|
|
115
127
|
}
|
|
116
128
|
return this.defaultFloatLabelErrorSpace;
|
|
117
129
|
}
|
|
130
|
+
formatNumber(value) {
|
|
131
|
+
const num = Number(value);
|
|
132
|
+
if (isNaN(num))
|
|
133
|
+
return String(value ?? '');
|
|
134
|
+
return num % 1 === 0 ? String(num) : parseFloat(num.toFixed(2)).toString();
|
|
135
|
+
}
|
|
118
136
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppMessageErrorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
119
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 @if (isControlErrorVisible()) {\r\n <div class=\"dsx-error-message\">\r\n <i\r\n class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\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>{{ control?.errors?.[\"min\"]?.min }}</strong>\r\n } @else if (control?.errors?.[\"max\"]) {\r\n El valor m\u00E1ximo permitido es\r\n <strong>{{ control?.errors?.[\"max\"]?.max
|
|
137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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 @if (isControlErrorVisible()) {\r\n <div class=\"dsx-error-message\">\r\n <i\r\n class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\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 }\r\n</div>\r\n<!-- mensaje para formulario en general -->\r\n@if (form?.invalid && form?.touched) {\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 }}</p-tag\r\n >\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}.dsx-error-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-error-slot.is-visible{max-height:7.5rem;margin-top:.3rem;opacity:1}.dsx-error-message{--dsx-error-color: #b42318;--dsx-error-bg: #fff2f0;color:var(--dsx-error-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.75rem,.72rem + .12vw,.8125rem);font-weight:400;line-height:1.35;letter-spacing:.01em;display:flex;align-items:flex-start;gap:.35rem;position:relative;z-index:1;padding:.2rem .45rem;border-left:3px solid var(--dsx-error-color);border-radius:0 6px 6px 0;background:var(--dsx-error-bg);box-shadow:0 1px 2px #00000014;width:100%;max-width:100%;white-space:normal;word-break:break-word;overflow-wrap:anywhere;transform:translateY(-2px);transition:transform .2s ease}.dsx-error-message strong{font-weight:500}.dsx-error-icon{font-style:normal;flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-error-color);margin-top:.08rem}.dsx-error-slot.is-visible .dsx-error-message{transform:translateY(0)}@media(max-width:640px){.dsx-error-slot.is-visible{max-height:9rem}.dsx-error-message{max-width:100%}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{max-height:none;margin-top:.25rem;overflow:visible;opacity:0;transform:translateY(-3px);transition:opacity .16s 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{width:calc(100% - .25rem);max-width:calc(100% - .25rem)}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] });
|
|
120
138
|
}
|
|
121
139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppMessageErrorComponent, decorators: [{
|
|
122
140
|
type: Component,
|
|
123
|
-
args: [{ selector: 'app-message-error', imports: [TagModule, DecimalPipe], template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n @if (isControlErrorVisible()) {\r\n <div class=\"dsx-error-message\">\r\n <i\r\n class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\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>{{ control?.errors?.[\"min\"]?.min }}</strong>\r\n } @else if (control?.errors?.[\"max\"]) {\r\n El valor m\u00E1ximo permitido es\r\n <strong>{{ control?.errors?.[\"max\"]?.max
|
|
141
|
+
args: [{ selector: 'app-message-error', imports: [TagModule, DecimalPipe], template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n @if (isControlErrorVisible()) {\r\n <div class=\"dsx-error-message\">\r\n <i\r\n class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n aria-hidden=\"true\"\r\n ></i>\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 }\r\n</div>\r\n<!-- mensaje para formulario en general -->\r\n@if (form?.invalid && form?.touched) {\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 }}</p-tag\r\n >\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:block}.dsx-error-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-error-slot.is-visible{max-height:7.5rem;margin-top:.3rem;opacity:1}.dsx-error-message{--dsx-error-color: #b42318;--dsx-error-bg: #fff2f0;color:var(--dsx-error-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.75rem,.72rem + .12vw,.8125rem);font-weight:400;line-height:1.35;letter-spacing:.01em;display:flex;align-items:flex-start;gap:.35rem;position:relative;z-index:1;padding:.2rem .45rem;border-left:3px solid var(--dsx-error-color);border-radius:0 6px 6px 0;background:var(--dsx-error-bg);box-shadow:0 1px 2px #00000014;width:100%;max-width:100%;white-space:normal;word-break:break-word;overflow-wrap:anywhere;transform:translateY(-2px);transition:transform .2s ease}.dsx-error-message strong{font-weight:500}.dsx-error-icon{font-style:normal;flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-error-color);margin-top:.08rem}.dsx-error-slot.is-visible .dsx-error-message{transform:translateY(0)}@media(max-width:640px){.dsx-error-slot.is-visible{max-height:9rem}.dsx-error-message{max-width:100%}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{max-height:none;margin-top:.25rem;overflow:visible;opacity:0;transform:translateY(-3px);transition:opacity .16s 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{width:calc(100% - .25rem);max-width:calc(100% - .25rem)}\n"] }]
|
|
124
142
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { control: [{
|
|
125
143
|
type: Input
|
|
126
144
|
}], form: [{
|
|
@@ -168,7 +186,13 @@ class AppMessageHelpComponent {
|
|
|
168
186
|
return null;
|
|
169
187
|
}
|
|
170
188
|
isHelpVisible() {
|
|
171
|
-
if (!this.control
|
|
189
|
+
if (!this.control) {
|
|
190
|
+
return false;
|
|
191
|
+
}
|
|
192
|
+
if (this.control.disabled) {
|
|
193
|
+
return !!this.getHelpMessage();
|
|
194
|
+
}
|
|
195
|
+
if (!this.control.valid) {
|
|
172
196
|
return false;
|
|
173
197
|
}
|
|
174
198
|
return !!this.getHelpMessage();
|
|
@@ -193,7 +217,7 @@ class AppMessageHelpComponent {
|
|
|
193
217
|
this.renderer.removeStyle(this.floatLabelElement, 'margin-bottom');
|
|
194
218
|
}
|
|
195
219
|
buildDateLongMessage() {
|
|
196
|
-
const rawValue = this.
|
|
220
|
+
const rawValue = this.getControlValue();
|
|
197
221
|
if (!rawValue) {
|
|
198
222
|
return null;
|
|
199
223
|
}
|
|
@@ -210,11 +234,29 @@ class AppMessageHelpComponent {
|
|
|
210
234
|
const message = formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);
|
|
211
235
|
return `${message}`;
|
|
212
236
|
}
|
|
237
|
+
getControlValue() {
|
|
238
|
+
if (!this.control) {
|
|
239
|
+
return null;
|
|
240
|
+
}
|
|
241
|
+
if (this.control.disabled && 'getRawValue' in this.control) {
|
|
242
|
+
const rawControl = this.control;
|
|
243
|
+
return rawControl.getRawValue();
|
|
244
|
+
}
|
|
245
|
+
return this.control.value;
|
|
246
|
+
}
|
|
213
247
|
parseDateInput(value) {
|
|
214
248
|
if (value instanceof Date) {
|
|
215
249
|
return Number.isNaN(value.getTime()) ? null : value;
|
|
216
250
|
}
|
|
217
251
|
if (typeof value === 'string') {
|
|
252
|
+
const ddmmyyyyMatch = value.match(/^(\d{2})-(\d{2})-(\d{4})$/);
|
|
253
|
+
if (ddmmyyyyMatch) {
|
|
254
|
+
const day = Number(ddmmyyyyMatch[1]);
|
|
255
|
+
const month = Number(ddmmyyyyMatch[2]) - 1;
|
|
256
|
+
const year = Number(ddmmyyyyMatch[3]);
|
|
257
|
+
const localDate = new Date(year, month, day);
|
|
258
|
+
return Number.isNaN(localDate.getTime()) ? null : localDate;
|
|
259
|
+
}
|
|
218
260
|
const shortDateMatch = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
|
219
261
|
if (shortDateMatch) {
|
|
220
262
|
const year = Number(shortDateMatch[1]);
|
|
@@ -241,10 +283,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
241
283
|
}] } });
|
|
242
284
|
|
|
243
285
|
class DsxStatusToggle {
|
|
244
|
-
onLabel = input('Activo', ...(ngDevMode ? [{ debugName: "onLabel" }] : /* istanbul ignore next */ []));
|
|
245
|
-
offLabel = input('Inactivo', ...(ngDevMode ? [{ debugName: "offLabel" }] : /* istanbul ignore next */ []));
|
|
246
286
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
247
287
|
formDisabled = false;
|
|
288
|
+
isViewOnly = input(false, ...(ngDevMode ? [{ debugName: "isViewOnly" }] : /* istanbul ignore next */ []));
|
|
289
|
+
offLabel = input('Inactivo', ...(ngDevMode ? [{ debugName: "offLabel" }] : /* istanbul ignore next */ []));
|
|
290
|
+
onLabel = input('Activo', ...(ngDevMode ? [{ debugName: "onLabel" }] : /* istanbul ignore next */ []));
|
|
248
291
|
value = false;
|
|
249
292
|
onChange = (_) => { };
|
|
250
293
|
onTouched = () => { };
|
|
@@ -266,13 +309,13 @@ class DsxStatusToggle {
|
|
|
266
309
|
this.onTouched();
|
|
267
310
|
}
|
|
268
311
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsxStatusToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
269
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
312
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DsxStatusToggle, isStandalone: true, selector: "dsx-status-toggle", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isViewOnly: { classPropertyName: "isViewOnly", publicName: "isViewOnly", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: false, transformFunction: null }, onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
270
313
|
{
|
|
271
314
|
provide: NG_VALUE_ACCESSOR,
|
|
272
315
|
useExisting: forwardRef(() => DsxStatusToggle),
|
|
273
316
|
multi: true,
|
|
274
317
|
},
|
|
275
|
-
], ngImport: i0, template: "<p-toggleButton\r\n fluid\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"change($event)\"\r\n [onLabel]=\"onLabel()\"\r\n [offLabel]=\"offLabel()\"\r\n [disabled]=\"disabled() || formDisabled\"\r\n [onIcon]=\"'pi pi-check-circle'\"\r\n [offIcon]=\"'pi pi-times-circle'\"\r\n class=\"dsx-status-toggle\"\r\n/>\r\n", styles: [":host ::ng-deep .dsx-status-toggle .p-button-label{font-weight:700!important}:host ::ng-deep .dsx-status-toggle.p-highlight,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked,:host ::ng-deep .dsx-status-toggle[aria-pressed=true],:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-label,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-label,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-label,:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-icon,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-icon,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-icon,:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-icon:before,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-icon:before,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-icon:before{color:#16a34a!important}:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked),:host ::ng-deep .dsx-status-toggle[aria-pressed=false],:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-label,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-label,:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-icon,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-icon,:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-icon:before,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-icon:before{color:#dc2626!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: ToggleButtonModule }, { kind: "component", type: i2.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }] });
|
|
318
|
+
], ngImport: i0, template: "@if(isViewOnly()){\r\n<p-toggleButton\r\n fluid\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"change($event)\"\r\n [onLabel]=\"onLabel()\"\r\n [offLabel]=\"offLabel()\"\r\n [disabled]=\"disabled() || formDisabled\"\r\n [onIcon]=\"'pi pi-check-circle'\"\r\n [offIcon]=\"'pi pi-times-circle'\"\r\n class=\"dsx-status-toggle\"\r\n/>\r\n}\r\n", styles: [":host ::ng-deep .dsx-status-toggle .p-button-label{font-weight:700!important}:host ::ng-deep .dsx-status-toggle.p-highlight,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked,:host ::ng-deep .dsx-status-toggle[aria-pressed=true],:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-label,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-label,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-label,:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-icon,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-icon,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-icon,:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-icon:before,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-icon:before,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-icon:before{color:#16a34a!important}:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked),:host ::ng-deep .dsx-status-toggle[aria-pressed=false],:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-label,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-label,:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-icon,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-icon,:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-icon:before,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-icon:before{color:#dc2626!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: ToggleButtonModule }, { kind: "component", type: i2.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }] });
|
|
276
319
|
}
|
|
277
320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsxStatusToggle, decorators: [{
|
|
278
321
|
type: Component,
|
|
@@ -282,8 +325,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
282
325
|
useExisting: forwardRef(() => DsxStatusToggle),
|
|
283
326
|
multi: true,
|
|
284
327
|
},
|
|
285
|
-
], template: "<p-toggleButton\r\n fluid\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"change($event)\"\r\n [onLabel]=\"onLabel()\"\r\n [offLabel]=\"offLabel()\"\r\n [disabled]=\"disabled() || formDisabled\"\r\n [onIcon]=\"'pi pi-check-circle'\"\r\n [offIcon]=\"'pi pi-times-circle'\"\r\n class=\"dsx-status-toggle\"\r\n/>\r\n", styles: [":host ::ng-deep .dsx-status-toggle .p-button-label{font-weight:700!important}:host ::ng-deep .dsx-status-toggle.p-highlight,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked,:host ::ng-deep .dsx-status-toggle[aria-pressed=true],:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-label,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-label,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-label,:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-icon,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-icon,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-icon,:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-icon:before,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-icon:before,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-icon:before{color:#16a34a!important}:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked),:host ::ng-deep .dsx-status-toggle[aria-pressed=false],:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-label,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-label,:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-icon,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-icon,:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-icon:before,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-icon:before{color:#dc2626!important}\n"] }]
|
|
286
|
-
}], propDecorators: {
|
|
328
|
+
], template: "@if(isViewOnly()){\r\n<p-toggleButton\r\n fluid\r\n [ngModel]=\"value\"\r\n (ngModelChange)=\"change($event)\"\r\n [onLabel]=\"onLabel()\"\r\n [offLabel]=\"offLabel()\"\r\n [disabled]=\"disabled() || formDisabled\"\r\n [onIcon]=\"'pi pi-check-circle'\"\r\n [offIcon]=\"'pi pi-times-circle'\"\r\n class=\"dsx-status-toggle\"\r\n/>\r\n}\r\n", styles: [":host ::ng-deep .dsx-status-toggle .p-button-label{font-weight:700!important}:host ::ng-deep .dsx-status-toggle.p-highlight,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked,:host ::ng-deep .dsx-status-toggle[aria-pressed=true],:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-label,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-label,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-label,:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-icon,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-icon,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-icon,:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-icon:before,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-icon:before,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-icon:before{color:#16a34a!important}:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked),:host ::ng-deep .dsx-status-toggle[aria-pressed=false],:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-label,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-label,:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-icon,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-icon,:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-icon:before,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-icon:before{color:#dc2626!important}\n"] }]
|
|
329
|
+
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isViewOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isViewOnly", required: false }] }], offLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "offLabel", required: false }] }], onLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLabel", required: false }] }] } });
|
|
287
330
|
|
|
288
331
|
class DsxEnableDisable {
|
|
289
332
|
checked = false;
|
|
@@ -1101,30 +1144,71 @@ class TemplateHighlight {
|
|
|
1101
1144
|
processText(raw, allowedKeys) {
|
|
1102
1145
|
if (!raw)
|
|
1103
1146
|
return '';
|
|
1104
|
-
// Primero marcamos
|
|
1147
|
+
// Primero marcamos variables y etiquetas en el texto crudo usando placeholders.
|
|
1105
1148
|
const spanMap = new Map();
|
|
1106
1149
|
let idx = 0;
|
|
1107
|
-
let result =
|
|
1150
|
+
let result = raw;
|
|
1151
|
+
// Variables {{...}}
|
|
1108
1152
|
result = result.replace(/{{(.*?)}}/g, (match, content) => {
|
|
1109
1153
|
const trimmed = content.trim();
|
|
1110
1154
|
let span;
|
|
1111
1155
|
if (content !== trimmed) {
|
|
1112
|
-
span = `<span class="var-invalid" title="Espacios inválidos">${this.
|
|
1156
|
+
span = `<span class="var-invalid" title="Espacios inválidos">${this.escapeHtml(match)}</span>`;
|
|
1113
1157
|
}
|
|
1114
1158
|
else if (!/^[A-Z0-9_]+$/.test(trimmed)) {
|
|
1115
|
-
span = `<span class="var-invalid" title="Formato inválido">${this.
|
|
1159
|
+
span = `<span class="var-invalid" title="Formato inválido">${this.escapeHtml(match)}</span>`;
|
|
1116
1160
|
}
|
|
1117
1161
|
else if (!allowedKeys.includes(trimmed)) {
|
|
1118
|
-
span = `<span class="var-invalid" title="Variable no definida">${this.
|
|
1162
|
+
span = `<span class="var-invalid" title="Variable no definida">${this.escapeHtml(match)}</span>`;
|
|
1119
1163
|
}
|
|
1120
1164
|
else {
|
|
1121
|
-
span = `<span class="var-valid">${this.
|
|
1165
|
+
span = `<span class="var-valid">${this.escapeHtml(match)}</span>`;
|
|
1166
|
+
}
|
|
1167
|
+
const placeholder = `__SPAN_${idx++}__`;
|
|
1168
|
+
spanMap.set(placeholder, span);
|
|
1169
|
+
return placeholder;
|
|
1170
|
+
});
|
|
1171
|
+
// Etiquetas estructurales: <negrita>, </negrita>, </salto>
|
|
1172
|
+
const tagRegex = /<[^>\n]+>/g;
|
|
1173
|
+
const allowedTags = new Set(['<negrita>', '</negrita>', '</salto>']);
|
|
1174
|
+
const tagMatches = [...raw.matchAll(tagRegex)];
|
|
1175
|
+
const invalidTagReasonByIndex = new Map();
|
|
1176
|
+
const negritaStack = [];
|
|
1177
|
+
for (let i = 0; i < tagMatches.length; i++) {
|
|
1178
|
+
const tag = tagMatches[i][0];
|
|
1179
|
+
if (!allowedTags.has(tag)) {
|
|
1180
|
+
invalidTagReasonByIndex.set(i, `Etiqueta inválida: "${tag}". Etiquetas permitidas: <negrita>, </negrita>, </salto>.`);
|
|
1181
|
+
continue;
|
|
1182
|
+
}
|
|
1183
|
+
if (tag === '<negrita>') {
|
|
1184
|
+
negritaStack.push(i);
|
|
1185
|
+
continue;
|
|
1186
|
+
}
|
|
1187
|
+
if (tag === '</negrita>' && negritaStack.length === 0) {
|
|
1188
|
+
invalidTagReasonByIndex.set(i, 'Estructura incorrecta: Se encontró "</negrita>" sin una apertura "<negrita>" previa.');
|
|
1189
|
+
continue;
|
|
1122
1190
|
}
|
|
1123
|
-
|
|
1191
|
+
if (tag === '</negrita>') {
|
|
1192
|
+
negritaStack.pop();
|
|
1193
|
+
}
|
|
1194
|
+
}
|
|
1195
|
+
for (const openTagIndex of negritaStack) {
|
|
1196
|
+
invalidTagReasonByIndex.set(openTagIndex, 'Estructura incorrecta: Falta cerrar una o más etiquetas "</negrita>".');
|
|
1197
|
+
}
|
|
1198
|
+
let tagIndex = 0;
|
|
1199
|
+
result = result.replace(tagRegex, (tag) => {
|
|
1200
|
+
const reason = invalidTagReasonByIndex.get(tagIndex);
|
|
1201
|
+
const span = reason
|
|
1202
|
+
? `<span class="tag-invalid" title="${this.escapeAttr(reason)}">${this.escapeHtml(tag)}</span>`
|
|
1203
|
+
: `<span class="tag-valid">${this.escapeHtml(tag)}</span>`;
|
|
1204
|
+
const placeholder = `__SPAN_${idx++}__`;
|
|
1124
1205
|
spanMap.set(placeholder, span);
|
|
1206
|
+
tagIndex += 1;
|
|
1125
1207
|
return placeholder;
|
|
1126
1208
|
});
|
|
1127
|
-
//
|
|
1209
|
+
// Escapamos el resto del texto (fuera de placeholders).
|
|
1210
|
+
result = this.escapeHtml(result);
|
|
1211
|
+
// Ahora marcamos llaves sueltas: {{ o }} que no estén en pareja de variable.
|
|
1128
1212
|
result = result.replace(/{{|}}/g, (m) => {
|
|
1129
1213
|
return `<span class="var-brace-error" title="Llave desbalanceada">${m}</span>`;
|
|
1130
1214
|
});
|
|
@@ -1143,14 +1227,18 @@ class TemplateHighlight {
|
|
|
1143
1227
|
.replace(/>/g, '>');
|
|
1144
1228
|
}
|
|
1145
1229
|
escapeAttr(text) {
|
|
1146
|
-
return text
|
|
1230
|
+
return text
|
|
1231
|
+
.replace(/&/g, '&')
|
|
1232
|
+
.replace(/"/g, '"')
|
|
1233
|
+
.replace(/</g, '<')
|
|
1234
|
+
.replace(/>/g, '>');
|
|
1147
1235
|
}
|
|
1148
1236
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TemplateHighlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1149
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TemplateHighlight, isStandalone: true, selector: "dsx-template-highlight", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, allowedKeys: { classPropertyName: "allowedKeys", publicName: "allowedKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-tabs value=\"0\">\r\n <p-tablist>\r\n <p-tab value=\"0\">\r\n <i class=\"pi pi-file-edit tab-icon\" aria-hidden=\"true\"></i>\r\n <span>Preliminar</span>\r\n </p-tab>\r\n <p-tab value=\"1\">\r\n <i class=\"pi pi-list tab-icon\" aria-hidden=\"true\"></i>\r\n <span>Variables</span>\r\n </p-tab>\r\n </p-tablist>\r\n <p-tabpanels>\r\n <p-tabpanel value=\"0\">\r\n <div class=\"template-highlight\" [innerHTML]=\"highlightedText()\"></div>\r\n </p-tabpanel>\r\n <p-tabpanel value=\"1\">\r\n @if (allowedKeys().length) {\r\n <ul class=\"template-vars-list\">\r\n @for (key of allowedKeys(); track key) {\r\n <li>\r\n <strong>{{ key }}</strong>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </p-tabpanel>\r\n </p-tabpanels>\r\n</p-tabs>\r\n", styles: [":host .template-highlight{white-space:pre-wrap;font-family:monospace;text-align:justify}:host .template-vars-list{margin:0 0 .65rem;padding-left:1rem}:host .template-vars-list li{margin:.15rem 0}:host .tab-icon{margin-right:.45rem}:host ::ng-deep .var-valid{color:#0a7a0a;background:#e6ffe6;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .var-invalid{color:#b30000;background:#ffe6e6;border-radius:3px;padding:0 2px;font-weight:600;text-decoration:underline wavy #b30000;cursor:help}:host ::ng-deep .var-brace-error{color:#cc7a00;background:#fff2cc;border-radius:3px;padding:0 2px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: TabsModule }, { kind: "component", type: i1$5.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1$5.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.TabList, selector: "p-tablist" }, { kind: "component", type: i1$5.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }] });
|
|
1237
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TemplateHighlight, isStandalone: true, selector: "dsx-template-highlight", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, allowedKeys: { classPropertyName: "allowedKeys", publicName: "allowedKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-tabs value=\"0\">\r\n <p-tablist>\r\n <p-tab value=\"0\">\r\n <i class=\"pi pi-file-edit tab-icon\" aria-hidden=\"true\"></i>\r\n <span>Preliminar</span>\r\n </p-tab>\r\n <p-tab value=\"1\">\r\n <i class=\"pi pi-list tab-icon\" aria-hidden=\"true\"></i>\r\n <span>Variables</span>\r\n </p-tab>\r\n </p-tablist>\r\n <p-tabpanels>\r\n <p-tabpanel value=\"0\">\r\n <div class=\"template-highlight\" [innerHTML]=\"highlightedText()\"></div>\r\n </p-tabpanel>\r\n <p-tabpanel value=\"1\">\r\n @if (allowedKeys().length) {\r\n <ul class=\"template-vars-list\">\r\n @for (key of allowedKeys(); track key) {\r\n <li>\r\n <strong>{{ key }}</strong>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </p-tabpanel>\r\n </p-tabpanels>\r\n</p-tabs>\r\n", styles: [":host .template-highlight{white-space:pre-wrap;font-family:monospace;text-align:justify}:host .template-vars-list{margin:0 0 .65rem;padding-left:1rem}:host .template-vars-list li{margin:.15rem 0}:host .tab-icon{margin-right:.45rem}:host ::ng-deep .var-valid{color:#0a7a0a;background:#e6ffe6;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .var-invalid{color:#b30000;background:#ffe6e6;border-radius:3px;padding:0 2px;font-weight:600;text-decoration:underline wavy #b30000;cursor:help}:host ::ng-deep .var-brace-error{color:#cc7a00;background:#fff2cc;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .tag-valid{color:#0a6c74;background:#e6f7f8;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .tag-invalid{color:#ad4e00;background:#fff3e8;border-radius:3px;padding:0 2px;font-weight:600;text-decoration:underline wavy #ad4e00;cursor:help}\n"], dependencies: [{ kind: "ngmodule", type: TabsModule }, { kind: "component", type: i1$5.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1$5.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.TabList, selector: "p-tablist" }, { kind: "component", type: i1$5.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }] });
|
|
1150
1238
|
}
|
|
1151
1239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TemplateHighlight, decorators: [{
|
|
1152
1240
|
type: Component,
|
|
1153
|
-
args: [{ selector: 'dsx-template-highlight', imports: [TabsModule], template: "<p-tabs value=\"0\">\r\n <p-tablist>\r\n <p-tab value=\"0\">\r\n <i class=\"pi pi-file-edit tab-icon\" aria-hidden=\"true\"></i>\r\n <span>Preliminar</span>\r\n </p-tab>\r\n <p-tab value=\"1\">\r\n <i class=\"pi pi-list tab-icon\" aria-hidden=\"true\"></i>\r\n <span>Variables</span>\r\n </p-tab>\r\n </p-tablist>\r\n <p-tabpanels>\r\n <p-tabpanel value=\"0\">\r\n <div class=\"template-highlight\" [innerHTML]=\"highlightedText()\"></div>\r\n </p-tabpanel>\r\n <p-tabpanel value=\"1\">\r\n @if (allowedKeys().length) {\r\n <ul class=\"template-vars-list\">\r\n @for (key of allowedKeys(); track key) {\r\n <li>\r\n <strong>{{ key }}</strong>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </p-tabpanel>\r\n </p-tabpanels>\r\n</p-tabs>\r\n", styles: [":host .template-highlight{white-space:pre-wrap;font-family:monospace;text-align:justify}:host .template-vars-list{margin:0 0 .65rem;padding-left:1rem}:host .template-vars-list li{margin:.15rem 0}:host .tab-icon{margin-right:.45rem}:host ::ng-deep .var-valid{color:#0a7a0a;background:#e6ffe6;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .var-invalid{color:#b30000;background:#ffe6e6;border-radius:3px;padding:0 2px;font-weight:600;text-decoration:underline wavy #b30000;cursor:help}:host ::ng-deep .var-brace-error{color:#cc7a00;background:#fff2cc;border-radius:3px;padding:0 2px;font-weight:600}\n"] }]
|
|
1241
|
+
args: [{ selector: 'dsx-template-highlight', imports: [TabsModule], template: "<p-tabs value=\"0\">\r\n <p-tablist>\r\n <p-tab value=\"0\">\r\n <i class=\"pi pi-file-edit tab-icon\" aria-hidden=\"true\"></i>\r\n <span>Preliminar</span>\r\n </p-tab>\r\n <p-tab value=\"1\">\r\n <i class=\"pi pi-list tab-icon\" aria-hidden=\"true\"></i>\r\n <span>Variables</span>\r\n </p-tab>\r\n </p-tablist>\r\n <p-tabpanels>\r\n <p-tabpanel value=\"0\">\r\n <div class=\"template-highlight\" [innerHTML]=\"highlightedText()\"></div>\r\n </p-tabpanel>\r\n <p-tabpanel value=\"1\">\r\n @if (allowedKeys().length) {\r\n <ul class=\"template-vars-list\">\r\n @for (key of allowedKeys(); track key) {\r\n <li>\r\n <strong>{{ key }}</strong>\r\n </li>\r\n }\r\n </ul>\r\n }\r\n </p-tabpanel>\r\n </p-tabpanels>\r\n</p-tabs>\r\n", styles: [":host .template-highlight{white-space:pre-wrap;font-family:monospace;text-align:justify}:host .template-vars-list{margin:0 0 .65rem;padding-left:1rem}:host .template-vars-list li{margin:.15rem 0}:host .tab-icon{margin-right:.45rem}:host ::ng-deep .var-valid{color:#0a7a0a;background:#e6ffe6;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .var-invalid{color:#b30000;background:#ffe6e6;border-radius:3px;padding:0 2px;font-weight:600;text-decoration:underline wavy #b30000;cursor:help}:host ::ng-deep .var-brace-error{color:#cc7a00;background:#fff2cc;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .tag-valid{color:#0a6c74;background:#e6f7f8;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .tag-invalid{color:#ad4e00;background:#fff3e8;border-radius:3px;padding:0 2px;font-weight:600;text-decoration:underline wavy #ad4e00;cursor:help}\n"] }]
|
|
1154
1242
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], allowedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedKeys", required: false }] }] } });
|
|
1155
1243
|
|
|
1156
1244
|
/**
|