ngx-dsxlibrary 2.21.30 → 2.21.32

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.
Files changed (9) hide show
  1. package/fesm2022/ngx-dsxlibrary-src-lib-components.mjs +84 -7
  2. package/fesm2022/ngx-dsxlibrary-src-lib-components.mjs.map +1 -1
  3. package/fesm2022/ngx-dsxlibrary.mjs +176 -17
  4. package/fesm2022/ngx-dsxlibrary.mjs.map +1 -1
  5. package/ngx-dsxlibrary-2.21.32.tgz +0 -0
  6. package/package.json +1 -1
  7. package/types/ngx-dsxlibrary-src-lib-components.d.ts +18 -3
  8. package/types/ngx-dsxlibrary.d.ts +19 -2
  9. package/ngx-dsxlibrary-2.21.30.tgz +0 -0
package/fesm2022/ngx-dsxlibrary-src-lib-components.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i1$1 from '@angular/common';
2
2
  import { DecimalPipe, CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { Input, Component, forwardRef, viewChild, input, signal, EventEmitter, effect, Output, model } from '@angular/core';
4
+ import { Input, Component, forwardRef, viewChild, input, signal, EventEmitter, effect, Output, model, inject, computed } from '@angular/core';
5
5
  import * as i1 from 'primeng/tag';
6
6
  import { TagModule } from 'primeng/tag';
7
7
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -15,6 +15,9 @@ import { AvatarModule } from 'primeng/avatar';
15
15
  import * as i1$2 from 'primeng/dialog';
16
16
  import { DialogModule } from 'primeng/dialog';
17
17
  import * as i1$3 from '@angular/platform-browser';
18
+ import { DomSanitizer } from '@angular/platform-browser';
19
+ import * as i1$4 from 'primeng/tabs';
20
+ import { TabsModule } from 'primeng/tabs';
18
21
 
19
22
  /**
20
23
  * Renderiza mensajes de validacion para un control o formulario.
@@ -30,13 +33,15 @@ class AppMessageErrorComponent {
30
33
  elementRef;
31
34
  renderer;
32
35
  // Espacio vertical reservado bajo el float label cuando hay error visible.
33
- floatLabelErrorSpace = '1.6rem';
36
+ defaultFloatLabelErrorSpace = '1.6rem';
37
+ templateFloatLabelErrorSpace = '3.1rem';
34
38
  // Referencia al contenedor PrimeNG padre, si existe.
35
39
  floatLabelElement = null;
36
40
  // Se conserva el estilo inline original para restaurarlo al ocultar/destruir.
37
41
  previousInlineMarginBottom = '';
38
42
  // Evita escrituras de estilo repetidas cuando el estado de visibilidad no cambia.
39
43
  lastAppliedVisibleState = false;
44
+ lastAppliedErrorSpace = '';
40
45
  constructor(elementRef, renderer) {
41
46
  this.elementRef = elementRef;
42
47
  this.renderer = renderer;
@@ -72,14 +77,18 @@ class AppMessageErrorComponent {
72
77
  return;
73
78
  }
74
79
  const isVisible = this.isControlErrorVisible();
75
- if (isVisible === this.lastAppliedVisibleState) {
80
+ const desiredSpace = this.getFloatLabelErrorSpace();
81
+ if (isVisible === this.lastAppliedVisibleState &&
82
+ (!isVisible || desiredSpace === this.lastAppliedErrorSpace)) {
76
83
  return;
77
84
  }
78
85
  this.lastAppliedVisibleState = isVisible;
79
86
  if (isVisible) {
80
- this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.floatLabelErrorSpace);
87
+ this.lastAppliedErrorSpace = desiredSpace;
88
+ this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', desiredSpace);
81
89
  return;
82
90
  }
91
+ this.lastAppliedErrorSpace = '';
83
92
  if (this.previousInlineMarginBottom) {
84
93
  this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.previousInlineMarginBottom);
85
94
  return;
@@ -95,12 +104,18 @@ class AppMessageErrorComponent {
95
104
  }
96
105
  return !!this.control.touched;
97
106
  }
107
+ getFloatLabelErrorSpace() {
108
+ if (this.control?.errors?.['invalidTemplateVariables']) {
109
+ return this.templateFloatLabelErrorSpace;
110
+ }
111
+ return this.defaultFloatLabelErrorSpace;
112
+ }
98
113
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AppMessageErrorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
99
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 >.\r\n } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong\r\n >.\r\n } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong\r\n >.\r\n } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong\r\n >.\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 >.\r\n } @else if (control?.errors?.[\"max\"]) {\r\n El valor m\u00E1ximo permitido es\r\n <strong>{{ control?.errors?.[\"max\"]?.max | number: \"1.2-2\" }}</strong\r\n >.\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 {\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:4.25rem;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:center;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;max-width:min(40ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-error-message strong{font-weight:500}.dsx-error-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-error-color)}.dsx-error-slot.is-visible .dsx-error-message{transform:translateY(0)}@media(max-width:640px){.dsx-error-slot.is-visible{max-height:5rem}.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{max-width:min(40ch,calc(100% - .25rem))}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
114
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 >.\r\n } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong\r\n >.\r\n } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong\r\n >.\r\n } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong\r\n >.\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 >.\r\n } @else if (control?.errors?.[\"max\"]) {\r\n El valor m\u00E1ximo permitido es\r\n <strong>{{ control?.errors?.[\"max\"]?.max | number: \"1.2-2\" }}</strong\r\n >.\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 {\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:4.25rem;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:center;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;max-width:min(40ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-error-message strong{font-weight:500}.dsx-error-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-error-color)}.dsx-error-slot.is-visible .dsx-error-message{transform:translateY(0)}@media(max-width:640px){.dsx-error-slot.is-visible{max-height:5rem}.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{max-width:min(40ch,calc(100% - .25rem))}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
100
115
  }
101
116
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AppMessageErrorComponent, decorators: [{
102
117
  type: Component,
103
- 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 >.\r\n } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong\r\n >.\r\n } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong\r\n >.\r\n } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong\r\n >.\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 >.\r\n } @else if (control?.errors?.[\"max\"]) {\r\n El valor m\u00E1ximo permitido es\r\n <strong>{{ control?.errors?.[\"max\"]?.max | number: \"1.2-2\" }}</strong\r\n >.\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 {\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:4.25rem;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:center;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;max-width:min(40ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-error-message strong{font-weight:500}.dsx-error-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-error-color)}.dsx-error-slot.is-visible .dsx-error-message{transform:translateY(0)}@media(max-width:640px){.dsx-error-slot.is-visible{max-height:5rem}.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{max-width:min(40ch,calc(100% - .25rem))}\n"] }]
118
+ 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 >.\r\n } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong\r\n >.\r\n } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong\r\n >.\r\n } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong\r\n >.\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 >.\r\n } @else if (control?.errors?.[\"max\"]) {\r\n El valor m\u00E1ximo permitido es\r\n <strong>{{ control?.errors?.[\"max\"]?.max | number: \"1.2-2\" }}</strong\r\n >.\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 {\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:4.25rem;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:center;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;max-width:min(40ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-error-message strong{font-weight:500}.dsx-error-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-error-color)}.dsx-error-slot.is-visible .dsx-error-message{transform:translateY(0)}@media(max-width:640px){.dsx-error-slot.is-visible{max-height:5rem}.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{max-width:min(40ch,calc(100% - .25rem))}\n"] }]
104
119
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { control: [{
105
120
  type: Input
106
121
  }], form: [{
@@ -828,9 +843,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
828
843
  args: [{ selector: 'app-pdf-preview', imports: [DialogModule], template: "<p-dialog\r\n header=\"Vista previa del documento de soporte\"\r\n [(visible)]=\"visible\"\r\n [style]=\"{ width: '80vw', height: '90vh' }\"\r\n [closable]=\"true\"\r\n [maximizable]=\"true\"\r\n>\r\n @if (pdfUrl) {\r\n <iframe\r\n [src]=\"pdfUrl\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n style=\"border: none\"\r\n ></iframe>\r\n }\r\n</p-dialog>\r\n" }]
829
844
  }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], blob: [{ type: i0.Input, args: [{ isSignal: true, alias: "blob", required: false }] }] } });
830
845
 
846
+ class TemplateHighlight {
847
+ text = input(null, ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
848
+ allowedKeys = input([], ...(ngDevMode ? [{ debugName: "allowedKeys" }] : /* istanbul ignore next */ []));
849
+ sanitizer = inject(DomSanitizer);
850
+ highlightedText = computed(() => {
851
+ return this.sanitizer.bypassSecurityTrustHtml(this.processText(this.text(), this.allowedKeys()));
852
+ }, ...(ngDevMode ? [{ debugName: "highlightedText" }] : /* istanbul ignore next */ []));
853
+ processText(raw, allowedKeys) {
854
+ if (!raw)
855
+ return '';
856
+ // Primero marcamos las variables bien formadas {{...}}
857
+ const spanMap = new Map();
858
+ let idx = 0;
859
+ let result = this.escapeHtml(raw);
860
+ result = result.replace(/{{(.*?)}}/g, (match, content) => {
861
+ const trimmed = content.trim();
862
+ let span;
863
+ if (content !== trimmed) {
864
+ span = `<span class="var-invalid" title="Espacios inválidos">${this.escapeAttr(match)}</span>`;
865
+ }
866
+ else if (!/^[A-Z0-9_]+$/.test(trimmed)) {
867
+ span = `<span class="var-invalid" title="Formato inválido">${this.escapeAttr(match)}</span>`;
868
+ }
869
+ else if (!allowedKeys.includes(trimmed)) {
870
+ span = `<span class="var-invalid" title="Variable no definida">${this.escapeAttr(match)}</span>`;
871
+ }
872
+ else {
873
+ span = `<span class="var-valid">${this.escapeAttr(match)}</span>`;
874
+ }
875
+ const placeholder = `\x00SPAN${idx++}\x00`;
876
+ spanMap.set(placeholder, span);
877
+ return placeholder;
878
+ });
879
+ // Ahora marcamos llaves sueltas: { o } que no estén en pareja
880
+ result = result.replace(/{{|}}/g, (m) => {
881
+ return `<span class="var-brace-error" title="Llave desbalanceada">${m}</span>`;
882
+ });
883
+ // Restauramos los spans reales
884
+ for (const [placeholder, span] of spanMap) {
885
+ result = result.replace(placeholder, span);
886
+ }
887
+ return result;
888
+ }
889
+ escapeHtml(text) {
890
+ if (!text)
891
+ return '';
892
+ return text
893
+ .replace(/&/g, '&amp;')
894
+ .replace(/</g, '&lt;')
895
+ .replace(/>/g, '&gt;');
896
+ }
897
+ escapeAttr(text) {
898
+ return text.replace(/"/g, '&quot;');
899
+ }
900
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TemplateHighlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
901
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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$4.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1$4.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1$4.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i1$4.TabList, selector: "p-tablist" }, { kind: "component", type: i1$4.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }] });
902
+ }
903
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: TemplateHighlight, decorators: [{
904
+ type: Component,
905
+ 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"] }]
906
+ }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], allowedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedKeys", required: false }] }] } });
907
+
831
908
  /**
832
909
  * Generated bundle index. Do not edit.
833
910
  */
834
911
 
835
- export { AppMessageErrorComponent, DocxPreviewComponent, DsxEnableDisable, FileComponent, JsonViewerComponent, KpicardComponent, PdfPreviewComponent };
912
+ export { AppMessageErrorComponent, DocxPreviewComponent, DsxEnableDisable, FileComponent, JsonViewerComponent, KpicardComponent, PdfPreviewComponent, TemplateHighlight };
836
913
  //# sourceMappingURL=ngx-dsxlibrary-src-lib-components.mjs.map