ngx-dsxlibrary 2.21.46 → 2.21.48

package/fesm2022/ngx-dsxlibrary-src-lib-components.mjs

@@ -38,8 +38,10 @@ class AppMessageErrorComponent {
     elementRef;
     renderer;
     // Espacio vertical reservado bajo el float label cuando hay error visible.
-    defaultFloatLabelErrorSpace = '1.6rem';
-    templateFloatLabelErrorSpace = '3.1rem';
+    defaultFloatLabelErrorSpace = '2.1rem';
+    templateFloatLabelErrorSpace = '2.1rem';
+    templateFloatLabelLongErrorSpace = '3.4rem';
+    templateLongErrorThreshold = 165;
     // Referencia al contenedor PrimeNG padre, si existe.
     floatLabelElement = null;
     // Se conserva el estilo inline original para restaurarlo al ocultar/destruir.
@@ -110,23 +112,146 @@ class AppMessageErrorComponent {
         return !!this.control.touched;
     }
     getFloatLabelErrorSpace() {
-        if (this.control?.errors?.['invalidTemplateVariables']) {
-            return this.templateFloatLabelErrorSpace;
+        const templateError = this.control?.errors?.['invalidTemplateVariables'] ||
+            this.control?.errors?.['invalidTemplateStructure'];
+        if (templateError) {
+            const errorData = templateError;
+            const firstDetail = Array.isArray(errorData.details)
+                ? (errorData.details[0] ?? '')
+                : '';
+            const messageLength = `${errorData.message ?? ''} ${firstDetail}`.trim()
+                .length;
+            return messageLength > this.templateLongErrorThreshold
+                ? this.templateFloatLabelLongErrorSpace
+                : this.templateFloatLabelErrorSpace;
         }
         return this.defaultFloatLabelErrorSpace;
     }
     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 });
-    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 | number: \"1.2-2\" }}</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 {\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" }] });
+    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 | number: \"1.2-2\" }}</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"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppMessageErrorComponent, decorators: [{
             type: Component,
-            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 | number: \"1.2-2\" }}</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 {\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"] }]
+            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 | number: \"1.2-2\" }}</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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { control: [{
                 type: Input
             }], form: [{
                 type: Input
             }] } });
 
+class AppMessageHelpComponent {
+    elementRef;
+    renderer;
+    defaultFloatLabelHelpSpace = '1.6rem';
+    floatLabelElement = null;
+    previousInlineMarginBottom = '';
+    lastAppliedVisibleState = false;
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    control = null;
+    helperFunction = 'dateLong';
+    ngAfterViewInit() {
+        this.floatLabelElement = this.elementRef.nativeElement.closest('.p-floatlabel');
+        if (this.floatLabelElement) {
+            this.previousInlineMarginBottom =
+                this.floatLabelElement.style.marginBottom;
+            this.syncFloatLabelSpacing();
+        }
+    }
+    ngDoCheck() {
+        this.syncFloatLabelSpacing();
+    }
+    ngOnDestroy() {
+        if (!this.floatLabelElement) {
+            return;
+        }
+        if (this.previousInlineMarginBottom) {
+            this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.previousInlineMarginBottom);
+            return;
+        }
+        this.renderer.removeStyle(this.floatLabelElement, 'margin-bottom');
+    }
+    getHelpMessage() {
+        if (this.helperFunction === 'dateLong') {
+            return this.buildDateLongMessage();
+        }
+        return null;
+    }
+    isHelpVisible() {
+        if (!this.control?.valid) {
+            return false;
+        }
+        return !!this.getHelpMessage();
+    }
+    syncFloatLabelSpacing() {
+        if (!this.floatLabelElement) {
+            return;
+        }
+        const isVisible = this.isHelpVisible();
+        if (isVisible === this.lastAppliedVisibleState) {
+            return;
+        }
+        this.lastAppliedVisibleState = isVisible;
+        if (isVisible) {
+            this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.defaultFloatLabelHelpSpace);
+            return;
+        }
+        if (this.previousInlineMarginBottom) {
+            this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.previousInlineMarginBottom);
+            return;
+        }
+        this.renderer.removeStyle(this.floatLabelElement, 'margin-bottom');
+    }
+    buildDateLongMessage() {
+        const rawValue = this.control?.value;
+        if (!rawValue) {
+            return null;
+        }
+        const date = this.parseDateInput(rawValue);
+        if (!date) {
+            return null;
+        }
+        const formattedDate = new Intl.DateTimeFormat('es-GT', {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }).format(date);
+        const message = formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);
+        return `${message}`;
+    }
+    parseDateInput(value) {
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        if (typeof value === 'string') {
+            const shortDateMatch = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+            if (shortDateMatch) {
+                const year = Number(shortDateMatch[1]);
+                const month = Number(shortDateMatch[2]) - 1;
+                const day = Number(shortDateMatch[3]);
+                const localDate = new Date(year, month, day);
+                return Number.isNaN(localDate.getTime()) ? null : localDate;
+            }
+            const parsedDate = new Date(value);
+            return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppMessageHelpComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: AppMessageHelpComponent, isStandalone: true, selector: "dsx-message-help", inputs: { control: "control", helperFunction: "helperFunction" }, ngImport: i0, template: "<div class=\"dsx-help-slot\" [class.is-visible]=\"isHelpVisible()\">\r\n  @if (isHelpVisible()) {\r\n    <div class=\"dsx-help-message\">\r\n      <i class=\"pi pi-info-circle dsx-help-icon\" aria-hidden=\"true\"></i>\r\n      <span>{{ getHelpMessage() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.dsx-help-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-help-slot.is-visible{max-height:3.6rem;margin-top:.3rem;opacity:1}.dsx-help-message{--dsx-help-color: #067647;--dsx-help-bg: #ecfdf3;color:var(--dsx-help-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-help-color);border-radius:0 6px 6px 0;background:var(--dsx-help-bg);box-shadow:0 1px 2px #00000014;max-width:min(52ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-help-slot.is-visible .dsx-help-message{transform:translateY(0)}.dsx-help-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-help-color)}@media(max-width:640px){.dsx-help-slot.is-visible{max-height:4.4rem}.dsx-help-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-help-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-help-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-help-message{max-width:min(52ch,calc(100% - .25rem))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppMessageHelpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dsx-message-help', template: "<div class=\"dsx-help-slot\" [class.is-visible]=\"isHelpVisible()\">\r\n  @if (isHelpVisible()) {\r\n    <div class=\"dsx-help-message\">\r\n      <i class=\"pi pi-info-circle dsx-help-icon\" aria-hidden=\"true\"></i>\r\n      <span>{{ getHelpMessage() }}</span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}.dsx-help-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-help-slot.is-visible{max-height:3.6rem;margin-top:.3rem;opacity:1}.dsx-help-message{--dsx-help-color: #067647;--dsx-help-bg: #ecfdf3;color:var(--dsx-help-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-help-color);border-radius:0 6px 6px 0;background:var(--dsx-help-bg);box-shadow:0 1px 2px #00000014;max-width:min(52ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-help-slot.is-visible .dsx-help-message{transform:translateY(0)}.dsx-help-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-help-color)}@media(max-width:640px){.dsx-help-slot.is-visible{max-height:4.4rem}.dsx-help-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-help-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-help-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-help-message{max-width:min(52ch,calc(100% - .25rem))}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { control: [{
+                type: Input
+            }], helperFunction: [{
+                type: Input
+            }] } });
+
 class DsxStatusToggle {
     onLabel = input('Activo', ...(ngDevMode ? [{ debugName: "onLabel" }] : /* istanbul ignore next */ []));
     offLabel = input('Inactivo', ...(ngDevMode ? [{ debugName: "offLabel" }] : /* istanbul ignore next */ []));
@@ -988,30 +1113,71 @@ class TemplateHighlight {
     processText(raw, allowedKeys) {
         if (!raw)
             return '';
-        // Primero marcamos las variables bien formadas {{...}}
+        // Primero marcamos variables y etiquetas en el texto crudo usando placeholders.
         const spanMap = new Map();
         let idx = 0;
-        let result = this.escapeHtml(raw);
+        let result = raw;
+        // Variables {{...}}
         result = result.replace(/{{(.*?)}}/g, (match, content) => {
             const trimmed = content.trim();
             let span;
             if (content !== trimmed) {
-                span = `<span class="var-invalid" title="Espacios inválidos">${this.escapeAttr(match)}</span>`;
+                span = `<span class="var-invalid" title="Espacios inválidos">${this.escapeHtml(match)}</span>`;
             }
             else if (!/^[A-Z0-9_]+$/.test(trimmed)) {
-                span = `<span class="var-invalid" title="Formato inválido">${this.escapeAttr(match)}</span>`;
+                span = `<span class="var-invalid" title="Formato inválido">${this.escapeHtml(match)}</span>`;
             }
             else if (!allowedKeys.includes(trimmed)) {
-                span = `<span class="var-invalid" title="Variable no definida">${this.escapeAttr(match)}</span>`;
+                span = `<span class="var-invalid" title="Variable no definida">${this.escapeHtml(match)}</span>`;
             }
             else {
-                span = `<span class="var-valid">${this.escapeAttr(match)}</span>`;
+                span = `<span class="var-valid">${this.escapeHtml(match)}</span>`;
+            }
+            const placeholder = `__SPAN_${idx++}__`;
+            spanMap.set(placeholder, span);
+            return placeholder;
+        });
+        // Etiquetas estructurales: <negrita>, </negrita>, </salto>
+        const tagRegex = /<[^>\n]+>/g;
+        const allowedTags = new Set(['<negrita>', '</negrita>', '</salto>']);
+        const tagMatches = [...raw.matchAll(tagRegex)];
+        const invalidTagReasonByIndex = new Map();
+        const negritaStack = [];
+        for (let i = 0; i < tagMatches.length; i++) {
+            const tag = tagMatches[i][0];
+            if (!allowedTags.has(tag)) {
+                invalidTagReasonByIndex.set(i, `Etiqueta inválida: "${tag}". Etiquetas permitidas: <negrita>, </negrita>, </salto>.`);
+                continue;
+            }
+            if (tag === '<negrita>') {
+                negritaStack.push(i);
+                continue;
+            }
+            if (tag === '</negrita>' && negritaStack.length === 0) {
+                invalidTagReasonByIndex.set(i, 'Estructura incorrecta: Se encontró "</negrita>" sin una apertura "<negrita>" previa.');
+                continue;
             }
-            const placeholder = `\x00SPAN${idx++}\x00`;
+            if (tag === '</negrita>') {
+                negritaStack.pop();
+            }
+        }
+        for (const openTagIndex of negritaStack) {
+            invalidTagReasonByIndex.set(openTagIndex, 'Estructura incorrecta: Falta cerrar una o más etiquetas "</negrita>".');
+        }
+        let tagIndex = 0;
+        result = result.replace(tagRegex, (tag) => {
+            const reason = invalidTagReasonByIndex.get(tagIndex);
+            const span = reason
+                ? `<span class="tag-invalid" title="${this.escapeAttr(reason)}">${this.escapeHtml(tag)}</span>`
+                : `<span class="tag-valid">${this.escapeHtml(tag)}</span>`;
+            const placeholder = `__SPAN_${idx++}__`;
             spanMap.set(placeholder, span);
+            tagIndex += 1;
             return placeholder;
         });
-        // Ahora marcamos llaves sueltas: { o } que no estén en pareja
+        // Escapamos el resto del texto (fuera de placeholders).
+        result = this.escapeHtml(result);
+        // Ahora marcamos llaves sueltas: {{ o }} que no estén en pareja de variable.
         result = result.replace(/{{|}}/g, (m) => {
             return `<span class="var-brace-error" title="Llave desbalanceada">${m}</span>`;
         });
@@ -1030,19 +1196,23 @@ class TemplateHighlight {
             .replace(/>/g, '&gt;');
     }
     escapeAttr(text) {
-        return text.replace(/"/g, '&quot;');
+        return text
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TemplateHighlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TemplateHighlight, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], allowedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedKeys", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AppMessageErrorComponent, DateIndicator, DocxPreviewComponent, DsxEnableDisable, DsxStatusToggle, FileComponent, JsonViewerComponent, KpicardComponent, PdfPreviewComponent, TemplateHighlight };
+export { AppMessageErrorComponent, AppMessageHelpComponent, DateIndicator, DocxPreviewComponent, DsxEnableDisable, DsxStatusToggle, FileComponent, JsonViewerComponent, KpicardComponent, PdfPreviewComponent, TemplateHighlight };
 //# sourceMappingURL=ngx-dsxlibrary-src-lib-components.mjs.map