ngx-dsxlibrary 2.21.60 → 2.21.62

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

@@ -1,17 +1,16 @@
 import * as i0 from '@angular/core';
-import { Input, Component, input, forwardRef, viewChild, signal, EventEmitter, effect, Output, model, inject, computed } from '@angular/core';
-import * as i1 from 'primeng/tag';
-import { TagModule } from 'primeng/tag';
-import * as i1$1 from '@angular/forms';
+import { input, forwardRef, Component, EventEmitter, effect, Output, viewChild, signal, Input, model, inject, computed } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
-import { FileUpload } from 'primeng/fileupload';
-import * as i1$2 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
 import * as i3 from 'primeng/api';
+import * as i1$2 from 'primeng/tag';
+import { TagModule } from 'primeng/tag';
 import * as i2$2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import { CountUpDirective } from 'ngx-countup';
@@ -24,273 +23,6 @@ import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$5 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
 
-/**
- * Renderiza mensajes de validacion para un control o formulario.
- *
- * Nota de depuracion:
- * - En contenedores PrimeNG `p-floatlabel`, el mensaje visual se pinta como
- *   overlay (CSS absoluto) para no deformar la posicion del label.
- * - Para evitar solapamiento con el siguiente campo, este componente ajusta
- *   temporalmente el `margin-bottom` del `.p-floatlabel` padre cuando el error
- *   esta visible.
- */
-class AppMessageErrorComponent {
-    elementRef;
-    renderer;
-    // Modifica únicamente estas variables al inicio de tu clase en el archivo .ts
-    defaultFloatLabelErrorSpace = '1.3rem'; // Reducido de 2.1rem a 1.3rem
-    templateFloatLabelErrorSpace = '1.3rem'; // Reducido de 2.1rem a 1.3rem
-    templateFloatLabelLongErrorSpace = '2.4rem'; // Reducido de 3.4rem a 2.4rem
-    templateLongErrorThreshold = 165;
-    // Referencia al contenedor PrimeNG padre, si existe.
-    floatLabelElement = null;
-    // Se conserva el estilo inline original para restaurarlo al ocultar/destruir.
-    previousInlineMarginBottom = '';
-    // Evita escrituras de estilo repetidas cuando el estado de visibilidad no cambia.
-    lastAppliedVisibleState = false;
-    lastAppliedErrorSpace = '';
-    // Historial de estados para evitar ejecuciones innecesarias en ngDoCheck
-    lastControlStatus = '';
-    lastControlTouched = false;
-    lastControlDirty = false;
-    control = null;
-    form = null;
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-    }
-    ngAfterViewInit() {
-        // Busca el FloatLabel mas cercano para ajustar su separacion inferior.
-        this.floatLabelElement = this.elementRef.nativeElement.closest('.p-floatlabel');
-        if (this.floatLabelElement) {
-            this.previousInlineMarginBottom =
-                this.floatLabelElement.style.marginBottom;
-            this.syncFloatLabelSpacing();
-        }
-    }
-    ngDoCheck() {
-        if (!this.control)
-            return;
-        // OPTIMIZACIÓN: Detiene la ejecución si el cambio en el modal no afectó las propiedades del control
-        if (this.control.status !== this.lastControlStatus ||
-            this.control.touched !== this.lastControlTouched ||
-            this.control.dirty !== this.lastControlDirty) {
-            this.lastControlStatus = this.control.status;
-            this.lastControlTouched = this.control.touched;
-            this.lastControlDirty = this.control.dirty;
-            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');
-    }
-    syncFloatLabelSpacing() {
-        if (!this.floatLabelElement)
-            return;
-        const isVisible = this.isControlErrorVisible();
-        const desiredSpace = this.getFloatLabelErrorSpace();
-        if (isVisible === this.lastAppliedVisibleState &&
-            (!isVisible || desiredSpace === this.lastAppliedErrorSpace)) {
-            return;
-        }
-        this.lastAppliedVisibleState = isVisible;
-        if (isVisible) {
-            this.lastAppliedErrorSpace = desiredSpace;
-            this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', desiredSpace);
-            return;
-        }
-        this.lastAppliedErrorSpace = '';
-        if (this.previousInlineMarginBottom) {
-            this.renderer.setStyle(this.floatLabelElement, 'margin-bottom', this.previousInlineMarginBottom);
-            return;
-        }
-        this.renderer.removeStyle(this.floatLabelElement, 'margin-bottom');
-    }
-    // CORRECCIÓN: El error solo se activa si el campo es inválido Y el usuario interactuó con él
-    isControlErrorVisible() {
-        if (!this.control || !this.control.invalid) {
-            return false;
-        }
-        // Condición unificada: requiere interacción real (touched o dirty) para pintarse de rojo
-        return !!(this.control.touched || this.control.dirty);
-    }
-    getFloatLabelErrorSpace() {
-        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;
-    }
-    formatNumber(value) {
-        const num = Number(value);
-        if (isNaN(num))
-            return String(value ?? '');
-        return num % 1 === 0 ? String(num) : parseFloat(num.toFixed(2)).toString();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AppMessageErrorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: AppMessageErrorComponent, isStandalone: true, selector: "app-message-error", inputs: { control: "control", form: "form" }, ngImport: i0, template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n  <div class=\"dsx-error-message\">\r\n    <div class=\"dsx-error-message-content\">\r\n      <i\r\n        class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n\r\n      @if (control?.errors?.[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n        <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDate\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minimumAge\"]) {\r\n        <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"min\"]?.min) }}</strong>\r\n      } @else if (control?.errors?.[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"max\"]?.max) }}</strong>\r\n      } @else if (control?.errors?.[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control?.errors?.[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n        <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (control?.errors?.[\"invalidTemplateStructure\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateStructure\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateStructure\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateStructure\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        Existe un error a\u00FAn no identificado.\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Mensaje para formulario en general (Cambiado form.touched por form.dirty para evitar falsos positivos al clicar el fondo) -->\r\n@if (form?.invalid && form?.dirty) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ form?.getError(\"atLeastOneRequired\")?.message }}\r\n      </p-tag>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:10;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{display:block;max-height:none;overflow:visible;margin-top:.15rem;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-error-message-content{display:flex;align-items:center;gap:.3rem;width:100%;box-sizing:border-box;padding-left:.35rem;font-size:.875rem;background:var(--dsx-error-bg, #fff2f0)!important;color:var(--dsx-error-color, #b42318)!important;border-left:3px solid var(--dsx-error-color, #b42318)!important;box-shadow:0 2px 4px #00000014}:host-context(.p-floatlabel) .dsx-error-icon{flex:0 0 auto;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AppMessageErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-message-error', imports: [TagModule], template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n  <div class=\"dsx-error-message\">\r\n    <div class=\"dsx-error-message-content\">\r\n      <i\r\n        class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n\r\n      @if (control?.errors?.[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n        <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDate\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minimumAge\"]) {\r\n        <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"min\"]?.min) }}</strong>\r\n      } @else if (control?.errors?.[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ formatNumber(control?.errors?.[\"max\"]?.max) }}</strong>\r\n      } @else if (control?.errors?.[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control?.errors?.[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n        <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else if (control?.errors?.[\"invalidTemplateStructure\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateStructure\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateStructure\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateStructure\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        Existe un error a\u00FAn no identificado.\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Mensaje para formulario en general (Cambiado form.touched por form.dirty para evitar falsos positivos al clicar el fondo) -->\r\n@if (form?.invalid && form?.dirty) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ form?.getError(\"atLeastOneRequired\")?.message }}\r\n      </p-tag>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:10;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{display:block;max-height:none;overflow:visible;margin-top:.15rem;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-error-message-content{display:flex;align-items:center;gap:.3rem;width:100%;box-sizing:border-box;padding-left:.35rem;font-size:.875rem;background:var(--dsx-error-bg, #fff2f0)!important;color:var(--dsx-error-color, #b42318)!important;border-left:3px solid var(--dsx-error-color, #b42318)!important;box-shadow:0 2px 4px #00000014}:host-context(.p-floatlabel) .dsx-error-icon{flex:0 0 auto;line-height:1}\n"] }]
-        }], 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) {
-            return false;
-        }
-        if (this.control.disabled) {
-            return !!this.getHelpMessage();
-        }
-        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.getControlValue();
-        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}`;
-    }
-    getControlValue() {
-        if (!this.control) {
-            return null;
-        }
-        if (this.control.disabled && 'getRawValue' in this.control) {
-            const rawControl = this.control;
-            return rawControl.getRawValue();
-        }
-        return this.control.value;
-    }
-    parseDateInput(value) {
-        if (value instanceof Date) {
-            return Number.isNaN(value.getTime()) ? null : value;
-        }
-        if (typeof value === 'string') {
-            const ddmmyyyyMatch = value.match(/^(\d{2})-(\d{2})-(\d{4})$/);
-            if (ddmmyyyyMatch) {
-                const day = Number(ddmmyyyyMatch[1]);
-                const month = Number(ddmmyyyyMatch[2]) - 1;
-                const year = Number(ddmmyyyyMatch[3]);
-                const localDate = new Date(year, month, day);
-                return Number.isNaN(localDate.getTime()) ? null : localDate;
-            }
-            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.15", 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.15", 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.15", 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 {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     formDisabled = false;
@@ -317,16 +49,16 @@ class DsxStatusToggle {
         this.onChange(value);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DsxStatusToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DsxStatusToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DsxStatusToggle),
                 multi: true,
             },
-        ], 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"] }] });
+        ], 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DsxStatusToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DsxStatusToggle, decorators: [{
             type: Component,
             args: [{ selector: 'dsx-status-toggle', imports: [FormsModule, ToggleButtonModule], providers: [
                         {
@@ -345,8 +77,8 @@ class DsxEnableDisable {
     // El componente es solo lectura; no necesita propagar cambios
     registerOnChange(_fn) { }
     registerOnTouched(_fn) { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DsxEnableDisable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: DsxEnableDisable, isStandalone: true, selector: "dsx-checkbox", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DsxEnableDisable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: DsxEnableDisable, isStandalone: true, selector: "dsx-checkbox", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DsxEnableDisable),
@@ -354,7 +86,7 @@ class DsxEnableDisable {
             },
         ], ngImport: i0, template: "<!-- From Uiverse.io by adamgiebl -->\r\n<div class=\"container\">\r\n  <input type=\"checkbox\" [checked]=\"checked\" disabled />\r\n  <div class=\"checkmark\"></div>\r\n</div>\r\n", styles: [".container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container{cursor:not-allowed;font-size:20px;line-height:1;-webkit-user-select:none;user-select:none}.checkmark{position:relative;display:block;box-sizing:border-box;height:1.1em;width:1.1em;background-color:#ccc;transition:background-color .3s,box-shadow .3s,transform .3s;border-radius:3px}.container input:checked~.checkmark{background-color:#47da99;box-shadow:inset 0 0 0 1px #ffffff59,0 2px 8px #47da9980;animation:pop .5s;animation-direction:alternate}.container input:disabled~.checkmark{opacity:1}.checkmark:after{content:\"\";position:absolute;display:none}.container input:checked~.checkmark:after{display:block}.container .checkmark:after{left:50%;top:50%;width:.28em;height:.58em;border:solid white;border-width:0 .18em .18em 0;transform:translate(-50%,-50%) rotate(45deg);filter:drop-shadow(0 0 1px rgba(0,0,0,.2))}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(.9)}to{transform:scale(1)}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DsxEnableDisable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DsxEnableDisable, decorators: [{
             type: Component,
             args: [{ selector: 'dsx-checkbox', imports: [], providers: [
                         {
@@ -365,69 +97,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     ], template: "<!-- From Uiverse.io by adamgiebl -->\r\n<div class=\"container\">\r\n  <input type=\"checkbox\" [checked]=\"checked\" disabled />\r\n  <div class=\"checkmark\"></div>\r\n</div>\r\n", styles: [".container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.container{cursor:not-allowed;font-size:20px;line-height:1;-webkit-user-select:none;user-select:none}.checkmark{position:relative;display:block;box-sizing:border-box;height:1.1em;width:1.1em;background-color:#ccc;transition:background-color .3s,box-shadow .3s,transform .3s;border-radius:3px}.container input:checked~.checkmark{background-color:#47da99;box-shadow:inset 0 0 0 1px #ffffff59,0 2px 8px #47da9980;animation:pop .5s;animation-direction:alternate}.container input:disabled~.checkmark{opacity:1}.checkmark:after{content:\"\";position:absolute;display:none}.container input:checked~.checkmark:after{display:block}.container .checkmark:after{left:50%;top:50%;width:.28em;height:.58em;border:solid white;border-width:0 .18em .18em 0;transform:translate(-50%,-50%) rotate(45deg);filter:drop-shadow(0 0 1px rgba(0,0,0,.2))}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(.9)}to{transform:scale(1)}}\n"] }]
         }] });
 
-class FileComponent {
-    fileUpload = viewChild.required('fileUpload');
-    accept = input('.xls,.xlsx', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
-    // Tamaño máximo en MB (se convierte internamente a bytes)
-    maxFileSize = input(5, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
-    // Mensajes para tipo de archivo inválido
-    invalidSummary = input('El formato es inválido.', ...(ngDevMode ? [{ debugName: "invalidSummary" }] : /* istanbul ignore next */ []));
-    invalidDetail = input('Archivo debe tener un formato válido. ({0}).', ...(ngDevMode ? [{ debugName: "invalidDetail" }] : /* istanbul ignore next */ []));
-    // Mensajes para tamaño de archivo inválido
-    invalidSizeSummary = input('Tamaño de archivo inválido.', ...(ngDevMode ? [{ debugName: "invalidSizeSummary" }] : /* istanbul ignore next */ []));
-    invalidSizeDetail = input('El tamaño máximo permitido es {0}', ...(ngDevMode ? [{ debugName: "invalidSizeDetail" }] : /* istanbul ignore next */ []));
-    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    value = null;
-    onChange = (_) => { };
-    onTouched = () => { };
-    onSelect(event) {
-        const file = event.files?.[0] ?? null;
-        this.value = file;
-        this.onChange(file);
-        this.onTouched();
-    }
-    /** 👇 API pública */
-    clear() {
-        this.fileUpload()?.clear();
-        this.value = null;
-        this.onChange(null);
-    }
-    writeValue(value) {
-        this.value = value;
-        if (!value) {
-            // Si se limpia el valor desde el formulario, limpiamos el componente
-            this.fileUpload()?.clear();
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled.set(isDisabled);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.15", type: FileComponent, isStandalone: true, selector: "dsx-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, invalidSummary: { classPropertyName: "invalidSummary", publicName: "invalidSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidDetail: { classPropertyName: "invalidDetail", publicName: "invalidDetail", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeSummary: { classPropertyName: "invalidSizeSummary", publicName: "invalidSizeSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeDetail: { classPropertyName: "invalidSizeDetail", publicName: "invalidSizeDetail", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => FileComponent),
-                multi: true,
-            },
-        ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-fileUpload\r\n  #fileUpload\r\n  mode=\"basic\"\r\n  [accept]=\"accept()\"\r\n  [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n  [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n  [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n  [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n  [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n  (onSelect)=\"onSelect($event)\"\r\n  [disabled]=\"disabled()\"\r\n/>\r\n", styles: [""], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: FileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dsx-file-upload', imports: [FileUpload], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => FileComponent),
-                            multi: true,
-                        },
-                    ], template: "<p-fileUpload\r\n  #fileUpload\r\n  mode=\"basic\"\r\n  [accept]=\"accept()\"\r\n  [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n  [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n  [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n  [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n  [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n  (onSelect)=\"onSelect($event)\"\r\n  [disabled]=\"disabled()\"\r\n/>\r\n" }]
-        }], propDecorators: { fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], invalidSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSummary", required: false }] }], invalidDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidDetail", required: false }] }], invalidSizeSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeSummary", required: false }] }], invalidSizeDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeDetail", required: false }] }] } });
-
 class JsonViewerComponent {
     data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     mode = input('view', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
@@ -837,16 +506,16 @@ class JsonViewerComponent {
             return value;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: JsonViewerComponent, isStandalone: true, selector: "app-json-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, textKey: { classPropertyName: "textKey", publicName: "textKey", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, itemsKey: { classPropertyName: "itemsKey", publicName: "itemsKey", isSignal: true, isRequired: false, transformFunction: null }, showStatusAsSymbol: { classPropertyName: "showStatusAsSymbol", publicName: "showStatusAsSymbol", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: JsonViewerComponent, isStandalone: true, selector: "app-json-viewer", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, textKey: { classPropertyName: "textKey", publicName: "textKey", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, itemsKey: { classPropertyName: "itemsKey", publicName: "itemsKey", isSignal: true, isRequired: false, transformFunction: null }, showStatusAsSymbol: { classPropertyName: "showStatusAsSymbol", publicName: "showStatusAsSymbol", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => JsonViewerComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<p-tree\r\n  [value]=\"nodes\"\r\n  class=\"json-tree w-full\"\r\n  selectionMode=\"single\"\r\n  [(selection)]=\"selectedNode\"\r\n  [highlightOnSelect]=\"false\"\r\n  (onNodeSelect)=\"onNodeSelect($event)\"\r\n>\r\n  <ng-template let-node pTemplate=\"default\">\r\n    <div class=\"json-node\">\r\n      <ng-container *ngIf=\"getNodeMeta(node) as meta; else defaultLabel\">\r\n        <ng-container [ngSwitch]=\"meta.kind\">\r\n          <ng-container *ngSwitchCase=\"'compact-item'\">\r\n            <span class=\"json-prefix\">{{ meta.indexLabel || \"\" }}</span>\r\n            <span class=\"json-key\"> Texto: </span>\r\n            <ng-container *ngIf=\"isEditMode(); else compactTextView\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"json-text-input\"\r\n                [class.json-text-inactive]=\"meta.activeBoolean === false\"\r\n                [value]=\"meta.text || ''\"\r\n                (mousedown)=\"$event.stopPropagation()\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (keydown)=\"$event.stopPropagation()\"\r\n                (input)=\"\r\n                  onTextEdit(\r\n                    $any(meta.textPath),\r\n                    $any($event.target).value,\r\n                    meta\r\n                  )\r\n                \"\r\n                (blur)=\"onTextBlur()\"\r\n              />\r\n            </ng-container>\r\n            <ng-template #compactTextView>\r\n              <span [class.json-text-inactive]=\"meta.activeBoolean === false\">{{\r\n                meta.text || \"\"\r\n              }}</span>\r\n            </ng-template>\r\n            <span class=\"json-separator\"> | </span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode()\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.activePath),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'group-active'\">\r\n            <span>{{ meta.title || \"\" }}</span>\r\n            <span class=\"json-separator\"> | </span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode() && meta.activePath\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.activePath),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'text-primitive'\">\r\n            <span>{{ meta.key || \"\" }}:</span>\r\n            <ng-container *ngIf=\"isEditMode(); else textPrimitiveView\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"json-text-input\"\r\n                [value]=\"meta.value || ''\"\r\n                (mousedown)=\"$event.stopPropagation()\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (keydown)=\"$event.stopPropagation()\"\r\n                (input)=\"\r\n                  onTextEdit($any(meta.path), $any($event.target).value, meta)\r\n                \"\r\n                (blur)=\"onTextBlur()\"\r\n              />\r\n            </ng-container>\r\n            <ng-template #textPrimitiveView>\r\n              <span>{{ meta.value || \"\" }}</span>\r\n            </ng-template>\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'active-primitive'\">\r\n            <span>{{ meta.key || \"\" }}:</span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode()\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.path),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchDefault>\r\n            {{ node.label }}\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-template #defaultLabel>\r\n        {{ node.label }}\r\n      </ng-template>\r\n    </div>\r\n  </ng-template>\r\n</p-tree>\r\n", styles: [":host ::ng-deep .json-tree .p-tree-node-content,:host ::ng-deep .json-tree .p-treenode-content{padding:.02rem .15rem!important;display:flex;align-items:center;width:100%;min-width:0}:host ::ng-deep .json-tree .p-tree-node-label,:host ::ng-deep .json-tree .p-tree-node-label>span{flex:1 1 0;min-width:0;display:flex}:host ::ng-deep .json-tree .json-node{display:flex;align-items:center;gap:.25rem;width:100%;min-width:0}:host ::ng-deep .json-tree .json-prefix,:host ::ng-deep .json-tree .json-key,:host ::ng-deep .json-tree .json-separator,:host ::ng-deep .json-tree .json-status{white-space:nowrap;flex-shrink:0}:host ::ng-deep .json-tree .json-text-input{flex:1 1 0;min-width:0;border:1px solid #cbd5e1;border-radius:.25rem;padding:.15rem .5rem;font-size:.875rem}:host ::ng-deep .json-tree .json-text-inactive{color:#8b5e61}:host ::ng-deep .json-tree input.json-text-input.json-text-inactive{background-color:#f9f2f2;border-color:#e5c8cb}:host ::ng-deep .json-tree .json-checkbox{width:.9rem;height:.9rem;cursor:pointer;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
+        ], ngImport: i0, template: "<p-tree\r\n  [value]=\"nodes\"\r\n  class=\"json-tree w-full\"\r\n  selectionMode=\"single\"\r\n  [(selection)]=\"selectedNode\"\r\n  [highlightOnSelect]=\"false\"\r\n  (onNodeSelect)=\"onNodeSelect($event)\"\r\n>\r\n  <ng-template let-node pTemplate=\"default\">\r\n    <div class=\"json-node\">\r\n      <ng-container *ngIf=\"getNodeMeta(node) as meta; else defaultLabel\">\r\n        <ng-container [ngSwitch]=\"meta.kind\">\r\n          <ng-container *ngSwitchCase=\"'compact-item'\">\r\n            <span class=\"json-prefix\">{{ meta.indexLabel || \"\" }}</span>\r\n            <span class=\"json-key\"> Texto: </span>\r\n            <ng-container *ngIf=\"isEditMode(); else compactTextView\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"json-text-input\"\r\n                [class.json-text-inactive]=\"meta.activeBoolean === false\"\r\n                [value]=\"meta.text || ''\"\r\n                (mousedown)=\"$event.stopPropagation()\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (keydown)=\"$event.stopPropagation()\"\r\n                (input)=\"\r\n                  onTextEdit(\r\n                    $any(meta.textPath),\r\n                    $any($event.target).value,\r\n                    meta\r\n                  )\r\n                \"\r\n                (blur)=\"onTextBlur()\"\r\n              />\r\n            </ng-container>\r\n            <ng-template #compactTextView>\r\n              <span [class.json-text-inactive]=\"meta.activeBoolean === false\">{{\r\n                meta.text || \"\"\r\n              }}</span>\r\n            </ng-template>\r\n            <span class=\"json-separator\"> | </span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode()\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.activePath),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'group-active'\">\r\n            <span>{{ meta.title || \"\" }}</span>\r\n            <span class=\"json-separator\"> | </span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode() && meta.activePath\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.activePath),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'text-primitive'\">\r\n            <span>{{ meta.key || \"\" }}:</span>\r\n            <ng-container *ngIf=\"isEditMode(); else textPrimitiveView\">\r\n              <input\r\n                type=\"text\"\r\n                class=\"json-text-input\"\r\n                [value]=\"meta.value || ''\"\r\n                (mousedown)=\"$event.stopPropagation()\"\r\n                (click)=\"$event.stopPropagation()\"\r\n                (keydown)=\"$event.stopPropagation()\"\r\n                (input)=\"\r\n                  onTextEdit($any(meta.path), $any($event.target).value, meta)\r\n                \"\r\n                (blur)=\"onTextBlur()\"\r\n              />\r\n            </ng-container>\r\n            <ng-template #textPrimitiveView>\r\n              <span>{{ meta.value || \"\" }}</span>\r\n            </ng-template>\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchCase=\"'active-primitive'\">\r\n            <span>{{ meta.key || \"\" }}:</span>\r\n            <span class=\"json-status\">{{ meta.activeVisual || \"\" }}</span>\r\n            <input\r\n              *ngIf=\"isEditMode()\"\r\n              type=\"checkbox\"\r\n              class=\"json-checkbox\"\r\n              [checked]=\"meta.activeBoolean === true\"\r\n              [disabled]=\"meta.activeBoolean === null\"\r\n              (mousedown)=\"$event.stopPropagation()\"\r\n              (click)=\"$event.stopPropagation()\"\r\n              (change)=\"\r\n                onActiveToggle(\r\n                  $any(meta.path),\r\n                  $any($event.target).checked,\r\n                  meta\r\n                )\r\n              \"\r\n            />\r\n          </ng-container>\r\n\r\n          <ng-container *ngSwitchDefault>\r\n            {{ node.label }}\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-template #defaultLabel>\r\n        {{ node.label }}\r\n      </ng-template>\r\n    </div>\r\n  </ng-template>\r\n</p-tree>\r\n", styles: [":host ::ng-deep .json-tree .p-tree-node-content,:host ::ng-deep .json-tree .p-treenode-content{padding:.02rem .15rem!important;display:flex;align-items:center;width:100%;min-width:0}:host ::ng-deep .json-tree .p-tree-node-label,:host ::ng-deep .json-tree .p-tree-node-label>span{flex:1 1 0;min-width:0;display:flex}:host ::ng-deep .json-tree .json-node{display:flex;align-items:center;gap:.25rem;width:100%;min-width:0}:host ::ng-deep .json-tree .json-prefix,:host ::ng-deep .json-tree .json-key,:host ::ng-deep .json-tree .json-separator,:host ::ng-deep .json-tree .json-status{white-space:nowrap;flex-shrink:0}:host ::ng-deep .json-tree .json-text-input{flex:1 1 0;min-width:0;border:1px solid #cbd5e1;border-radius:.25rem;padding:.15rem .5rem;font-size:.875rem}:host ::ng-deep .json-tree .json-text-inactive{color:#8b5e61}:host ::ng-deep .json-tree input.json-text-input.json-text-inactive{background-color:#f9f2f2;border-color:#e5c8cb}:host ::ng-deep .json-tree .json-checkbox{width:.9rem;height:.9rem;cursor:pointer;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2$1.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: JsonViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: JsonViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-json-viewer', standalone: true, imports: [CommonModule, TreeModule], providers: [
                         {
@@ -917,10 +586,10 @@ class DateIndicator {
         this.icon = 'pi pi-times-circle';
         this.tooltip = 'Última actualización: Sin valor • 0 días';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DateIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: DateIndicator, isStandalone: true, selector: "dsx-date-indicator", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, minDays: { classPropertyName: "minDays", publicName: "minDays", isSignal: true, isRequired: false, transformFunction: null }, maxDays: { classPropertyName: "maxDays", publicName: "maxDays", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<p-tag\r\n  [severity]=\"severity\"\r\n  [icon]=\"icon\"\r\n  [value]=\"status\"\r\n  [pTooltip]=\"tooltip\"\r\n>\r\n</p-tag>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DateIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: DateIndicator, isStandalone: true, selector: "dsx-date-indicator", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, minDays: { classPropertyName: "minDays", publicName: "minDays", isSignal: true, isRequired: false, transformFunction: null }, maxDays: { classPropertyName: "maxDays", publicName: "maxDays", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<p-tag\r\n  [severity]=\"severity\"\r\n  [icon]=\"icon\"\r\n  [value]=\"status\"\r\n  [pTooltip]=\"tooltip\"\r\n>\r\n</p-tag>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1$2.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DateIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DateIndicator, decorators: [{
             type: Component,
             args: [{ selector: 'dsx-date-indicator', imports: [TagModule, TooltipModule], template: "<p-tag\r\n  [severity]=\"severity\"\r\n  [icon]=\"icon\"\r\n  [value]=\"status\"\r\n  [pTooltip]=\"tooltip\"\r\n>\r\n</p-tag>\r\n" }]
         }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }], minDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDays", required: false }] }], maxDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDays", required: false }] }] } });
@@ -976,10 +645,10 @@ class KpicardComponent {
     getSelectedOption() {
         return this.options[this.option()] ?? this.options.currency; // Si no existe, usa `currency`
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: KpicardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: KpicardComponent, isStandalone: true, selector: "app-kpicard", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, valor: { classPropertyName: "valor", publicName: "valor", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n  <div class=\"kpi-container\">\r\n    <span\r\n      [countUp]=\"valor()\"\r\n      [countUpOptions]=\"getSelectedOption()\"\r\n      [class]=\"`card-value-${theme()}`\"\r\n      >0</span\r\n    >\r\n    <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n  </div>\r\n  <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#91cc08}.icon-peach{color:#5e412f}.icon-plasma{color:#dcdde1}.icon-nebula{color:#d8d8d8}.kpi-card{--gradient-light: linear-gradient(to bottom, #00fffc, #008cff);--text-color-light: #495057;--card-value-gradient-light: linear-gradient( 45deg, #00fffc, #a200ff, #0094ff );--gradient-dark: linear-gradient(to bottom, #ff00ff, #ff0066);--text-color-dark: #d5d7d8;--card-value-gradient-dark: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);--gradient-aqua: linear-gradient(to bottom, #00e0ff, #0079ff);--text-color-aqua: #6fa6b8;--card-value-gradient-aqua: linear-gradient(45deg, #00e0ff, #00ffc8, #00b7ff);--gradient-sunset: linear-gradient(to bottom, #ff9a9e, #fad0c4);--text-color-sunset: #cfbfaf;--card-value-gradient-sunset: linear-gradient( 45deg, #ff9a9e, #fad0c4, #ff6f61 );--gradient-mint: linear-gradient(to bottom, #98ff98, #00d4ff);--text-color-mint: #a3ca36;--card-value-gradient-mint: linear-gradient(45deg, #98ff98, #00e1ff, #00ffa6);--gradient-peach: linear-gradient(to bottom, #ffecd2, #fcb69f);--text-color-peach: #5e412f;--card-value-gradient-peach: linear-gradient( 45deg, #ffecd2, #ffb347, #ffcccb );--gradient-plasma: linear-gradient(to bottom, #6a00f4, #240046);--text-color-plasma: #dcdde1;--card-value-gradient-plasma: linear-gradient( 45deg, #6a00f4, #8338ec, #3a0ca3 );--gradient-nebula: linear-gradient(to bottom, #38aa0c, #2632d4);--text-color-nebula: #a372d1;--card-value-gradient-nebula: linear-gradient( 45deg, #c4ffe2, #a6c9ff, #8a12f3 );overflow:hidden;position:relative;box-shadow:1px 1px 8px #000000a6;display:inline-block;padding:1em;border-radius:.8em;font-family:Montserrat,sans-serif;font-size:.9rem;width:90%;min-width:180px;margin-left:.5em;margin-top:.5em}.kpi-card:after{position:absolute;content:\"\";width:.25rem;inset:.65rem auto .65rem .5rem;border-radius:.125rem;background:var(--gradient);transition:transform .3s ease;z-index:4}.kpi-card.light-theme:after{background:var(--gradient-light)}.kpi-card.dark-theme:after{background:var(--gradient-dark)}.kpi-card.aqua-theme:after{background:var(--gradient-aqua)}.kpi-card.sunset-theme:after{background:var(--gradient-sunset)}.kpi-card.mint-theme:after{background:var(--gradient-mint)}.kpi-card.peach-theme:after{background:var(--gradient-peach)}.kpi-card.plasma-theme:after{background:var(--gradient-plasma)}.kpi-card.nebula-theme:after{background:var(--gradient-nebula)}.kpi-container{margin-left:.5em}.card-value-light{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#00fffc,#a200ff,#0094ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,255,252,.3),0 0 10px rgba(162,0,255,.2),0 0 15px rgba(0,148,255,.1)}.card-value-dark{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#ff7e5f,#feb47b,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,126,95,.5),0 0 10px rgba(254,180,123,.4),0 0 15px rgba(255,106,0,.3)}.card-value-aqua{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-aqua);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,224,255,.3),0 0 10px rgba(0,255,200,.2),0 0 15px rgba(0,183,255,.1)}.card-value-sunset{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,154,158,.3),0 0 10px rgba(250,208,196,.2),0 0 15px rgba(255,111,97,.1)}.card-value-mint{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-mint);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(152,255,152,.4),0 0 10px rgba(0,225,255,.3),0 0 15px rgba(0,255,166,.2)}.card-value-peach{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-peach);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,236,210,.4),0 0 10px rgba(255,179,71,.3),0 0 15px rgba(255,204,203,.2)}.card-value-plasma{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-plasma);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(106,0,244,.5),0 0 10px rgba(131,56,236,.4),0 0 15px rgba(58,12,163,.3)}.card-value-nebula{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-nebula);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(27,27,47,.4),0 0 10px rgba(63,13,18,.3),0 0 15px rgba(142,45,226,.2)}.card-text{display:block;font-family:Roboto,sans-serif;padding-left:.2em}.card-text-light{color:var(--text-color-light)}.card-text-dark{color:var(--text-color-dark)}.card-text-aqua{color:var(--text-color-aqua)}.card-text-sunset{color:var(--text-color-sunset)}.card-text-mint{color:var(--text-color-mint)}.card-text-peach{color:var(--text-color-peach)}.card-text-plasma{color:var(--text-color-plasma)}.card-text-nebula{color:var(--text-color-nebula)}\n"], dependencies: [{ kind: "directive", type: CountUpDirective, selector: "[countUp]", inputs: ["countUp", "countUpOptions", "reanimateOnClick"], outputs: ["complete"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: KpicardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: KpicardComponent, isStandalone: true, selector: "app-kpicard", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, valor: { classPropertyName: "valor", publicName: "valor", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n  <div class=\"kpi-container\">\r\n    <span\r\n      [countUp]=\"valor()\"\r\n      [countUpOptions]=\"getSelectedOption()\"\r\n      [class]=\"`card-value-${theme()}`\"\r\n      >0</span\r\n    >\r\n    <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n  </div>\r\n  <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#91cc08}.icon-peach{color:#5e412f}.icon-plasma{color:#dcdde1}.icon-nebula{color:#d8d8d8}.kpi-card{--gradient-light: linear-gradient(to bottom, #00fffc, #008cff);--text-color-light: #495057;--card-value-gradient-light: linear-gradient( 45deg, #00fffc, #a200ff, #0094ff );--gradient-dark: linear-gradient(to bottom, #ff00ff, #ff0066);--text-color-dark: #d5d7d8;--card-value-gradient-dark: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);--gradient-aqua: linear-gradient(to bottom, #00e0ff, #0079ff);--text-color-aqua: #6fa6b8;--card-value-gradient-aqua: linear-gradient(45deg, #00e0ff, #00ffc8, #00b7ff);--gradient-sunset: linear-gradient(to bottom, #ff9a9e, #fad0c4);--text-color-sunset: #cfbfaf;--card-value-gradient-sunset: linear-gradient( 45deg, #ff9a9e, #fad0c4, #ff6f61 );--gradient-mint: linear-gradient(to bottom, #98ff98, #00d4ff);--text-color-mint: #a3ca36;--card-value-gradient-mint: linear-gradient(45deg, #98ff98, #00e1ff, #00ffa6);--gradient-peach: linear-gradient(to bottom, #ffecd2, #fcb69f);--text-color-peach: #5e412f;--card-value-gradient-peach: linear-gradient( 45deg, #ffecd2, #ffb347, #ffcccb );--gradient-plasma: linear-gradient(to bottom, #6a00f4, #240046);--text-color-plasma: #dcdde1;--card-value-gradient-plasma: linear-gradient( 45deg, #6a00f4, #8338ec, #3a0ca3 );--gradient-nebula: linear-gradient(to bottom, #38aa0c, #2632d4);--text-color-nebula: #a372d1;--card-value-gradient-nebula: linear-gradient( 45deg, #c4ffe2, #a6c9ff, #8a12f3 );overflow:hidden;position:relative;box-shadow:1px 1px 8px #000000a6;display:inline-block;padding:1em;border-radius:.8em;font-family:Montserrat,sans-serif;font-size:.9rem;width:90%;min-width:180px;margin-left:.5em;margin-top:.5em}.kpi-card:after{position:absolute;content:\"\";width:.25rem;inset:.65rem auto .65rem .5rem;border-radius:.125rem;background:var(--gradient);transition:transform .3s ease;z-index:4}.kpi-card.light-theme:after{background:var(--gradient-light)}.kpi-card.dark-theme:after{background:var(--gradient-dark)}.kpi-card.aqua-theme:after{background:var(--gradient-aqua)}.kpi-card.sunset-theme:after{background:var(--gradient-sunset)}.kpi-card.mint-theme:after{background:var(--gradient-mint)}.kpi-card.peach-theme:after{background:var(--gradient-peach)}.kpi-card.plasma-theme:after{background:var(--gradient-plasma)}.kpi-card.nebula-theme:after{background:var(--gradient-nebula)}.kpi-container{margin-left:.5em}.card-value-light{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#00fffc,#a200ff,#0094ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,255,252,.3),0 0 10px rgba(162,0,255,.2),0 0 15px rgba(0,148,255,.1)}.card-value-dark{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#ff7e5f,#feb47b,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,126,95,.5),0 0 10px rgba(254,180,123,.4),0 0 15px rgba(255,106,0,.3)}.card-value-aqua{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-aqua);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,224,255,.3),0 0 10px rgba(0,255,200,.2),0 0 15px rgba(0,183,255,.1)}.card-value-sunset{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,154,158,.3),0 0 10px rgba(250,208,196,.2),0 0 15px rgba(255,111,97,.1)}.card-value-mint{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-mint);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(152,255,152,.4),0 0 10px rgba(0,225,255,.3),0 0 15px rgba(0,255,166,.2)}.card-value-peach{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-peach);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,236,210,.4),0 0 10px rgba(255,179,71,.3),0 0 15px rgba(255,204,203,.2)}.card-value-plasma{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-plasma);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(106,0,244,.5),0 0 10px rgba(131,56,236,.4),0 0 15px rgba(58,12,163,.3)}.card-value-nebula{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-nebula);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(27,27,47,.4),0 0 10px rgba(63,13,18,.3),0 0 15px rgba(142,45,226,.2)}.card-text{display:block;font-family:Roboto,sans-serif;padding-left:.2em}.card-text-light{color:var(--text-color-light)}.card-text-dark{color:var(--text-color-dark)}.card-text-aqua{color:var(--text-color-aqua)}.card-text-sunset{color:var(--text-color-sunset)}.card-text-mint{color:var(--text-color-mint)}.card-text-peach{color:var(--text-color-peach)}.card-text-plasma{color:var(--text-color-plasma)}.card-text-nebula{color:var(--text-color-nebula)}\n"], dependencies: [{ kind: "directive", type: CountUpDirective, selector: "[countUp]", inputs: ["countUp", "countUpOptions", "reanimateOnClick"], outputs: ["complete"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: KpicardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: KpicardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-kpicard', imports: [CountUpDirective], template: "<div [class]=\"`kpi-card ${color()} ${theme()}-theme`\">\r\n  <div class=\"kpi-container\">\r\n    <span\r\n      [countUp]=\"valor()\"\r\n      [countUpOptions]=\"getSelectedOption()\"\r\n      [class]=\"`card-value-${theme()}`\"\r\n      >0</span\r\n    >\r\n    <span [class]=\"`card-text-${theme()}`\">{{ label() }}</span>\r\n  </div>\r\n  <i [class]=\"`${iconType()} icon icon-${theme()}`\"></i>\r\n</div>\r\n", styles: [".icon{float:right;font-size:500%;position:absolute;top:0rem;right:-.3rem;opacity:.2}.icon-light{color:#000}.icon-dark{color:#fff}.icon-aqua{color:#28cce9}.icon-sunset{color:#d1a9a5}.icon-mint{color:#91cc08}.icon-peach{color:#5e412f}.icon-plasma{color:#dcdde1}.icon-nebula{color:#d8d8d8}.kpi-card{--gradient-light: linear-gradient(to bottom, #00fffc, #008cff);--text-color-light: #495057;--card-value-gradient-light: linear-gradient( 45deg, #00fffc, #a200ff, #0094ff );--gradient-dark: linear-gradient(to bottom, #ff00ff, #ff0066);--text-color-dark: #d5d7d8;--card-value-gradient-dark: linear-gradient(45deg, #ff7e5f, #feb47b, #ff6a00);--gradient-aqua: linear-gradient(to bottom, #00e0ff, #0079ff);--text-color-aqua: #6fa6b8;--card-value-gradient-aqua: linear-gradient(45deg, #00e0ff, #00ffc8, #00b7ff);--gradient-sunset: linear-gradient(to bottom, #ff9a9e, #fad0c4);--text-color-sunset: #cfbfaf;--card-value-gradient-sunset: linear-gradient( 45deg, #ff9a9e, #fad0c4, #ff6f61 );--gradient-mint: linear-gradient(to bottom, #98ff98, #00d4ff);--text-color-mint: #a3ca36;--card-value-gradient-mint: linear-gradient(45deg, #98ff98, #00e1ff, #00ffa6);--gradient-peach: linear-gradient(to bottom, #ffecd2, #fcb69f);--text-color-peach: #5e412f;--card-value-gradient-peach: linear-gradient( 45deg, #ffecd2, #ffb347, #ffcccb );--gradient-plasma: linear-gradient(to bottom, #6a00f4, #240046);--text-color-plasma: #dcdde1;--card-value-gradient-plasma: linear-gradient( 45deg, #6a00f4, #8338ec, #3a0ca3 );--gradient-nebula: linear-gradient(to bottom, #38aa0c, #2632d4);--text-color-nebula: #a372d1;--card-value-gradient-nebula: linear-gradient( 45deg, #c4ffe2, #a6c9ff, #8a12f3 );overflow:hidden;position:relative;box-shadow:1px 1px 8px #000000a6;display:inline-block;padding:1em;border-radius:.8em;font-family:Montserrat,sans-serif;font-size:.9rem;width:90%;min-width:180px;margin-left:.5em;margin-top:.5em}.kpi-card:after{position:absolute;content:\"\";width:.25rem;inset:.65rem auto .65rem .5rem;border-radius:.125rem;background:var(--gradient);transition:transform .3s ease;z-index:4}.kpi-card.light-theme:after{background:var(--gradient-light)}.kpi-card.dark-theme:after{background:var(--gradient-dark)}.kpi-card.aqua-theme:after{background:var(--gradient-aqua)}.kpi-card.sunset-theme:after{background:var(--gradient-sunset)}.kpi-card.mint-theme:after{background:var(--gradient-mint)}.kpi-card.peach-theme:after{background:var(--gradient-peach)}.kpi-card.plasma-theme:after{background:var(--gradient-plasma)}.kpi-card.nebula-theme:after{background:var(--gradient-nebula)}.kpi-container{margin-left:.5em}.card-value-light{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#00fffc,#a200ff,#0094ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,255,252,.3),0 0 10px rgba(162,0,255,.2),0 0 15px rgba(0,148,255,.1)}.card-value-dark{display:block;font-size:200%;font-weight:bolder;background:linear-gradient(45deg,#ff7e5f,#feb47b,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,126,95,.5),0 0 10px rgba(254,180,123,.4),0 0 15px rgba(255,106,0,.3)}.card-value-aqua{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-aqua);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(0,224,255,.3),0 0 10px rgba(0,255,200,.2),0 0 15px rgba(0,183,255,.1)}.card-value-sunset{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,154,158,.3),0 0 10px rgba(250,208,196,.2),0 0 15px rgba(255,111,97,.1)}.card-value-mint{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-mint);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(152,255,152,.4),0 0 10px rgba(0,225,255,.3),0 0 15px rgba(0,255,166,.2)}.card-value-peach{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-peach);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(255,236,210,.4),0 0 10px rgba(255,179,71,.3),0 0 15px rgba(255,204,203,.2)}.card-value-plasma{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-plasma);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(106,0,244,.5),0 0 10px rgba(131,56,236,.4),0 0 15px rgba(58,12,163,.3)}.card-value-nebula{display:block;font-size:200%;font-weight:bolder;background:var(--card-value-gradient-nebula);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 5px rgba(27,27,47,.4),0 0 10px rgba(63,13,18,.3),0 0 15px rgba(142,45,226,.2)}.card-text{display:block;font-family:Roboto,sans-serif;padding-left:.2em}.card-text-light{color:var(--text-color-light)}.card-text-dark{color:var(--text-color-dark)}.card-text-aqua{color:var(--text-color-aqua)}.card-text-sunset{color:var(--text-color-sunset)}.card-text-mint{color:var(--text-color-mint)}.card-text-peach{color:var(--text-color-peach)}.card-text-plasma{color:var(--text-color-plasma)}.card-text-nebula{color:var(--text-color-nebula)}\n"] }]
         }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], valor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valor", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] } });
@@ -1079,10 +748,10 @@ class DocxPreviewComponent {
         }
         this.visibleChange.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DocxPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: DocxPreviewComponent, isStandalone: true, selector: "app-docx-preview", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-dialog\r\n  [visible]=\"visible\"\r\n  (onHide)=\"onHide()\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '1199px': '75vw', '575px': '90vw' }\"\r\n  [style]=\"{ width: '80vw' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  <ng-template #header>\r\n    <div class=\"flex justify-content-center align-items-center gap-2 px-2\">\r\n      <p-avatar image=\"icon2/word-2019.png\" />\r\n      <span class=\"font-bold\">Vista preliminar del documento</span>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"docx-preview-shell\">\r\n    @if (loading()) {\r\n      <div class=\"docx-preview-loading\">\r\n        <span class=\"docx-preview-spinner\"></span>\r\n        <span>Cargando vista previa del documento...</span>\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      #viewer\r\n      class=\"docx-preview-viewer\"\r\n      [class.is-hidden]=\"loading() && !rendered()\"\r\n    ></div>\r\n  </div>\r\n</p-dialog>\r\n", styles: [".docx-preview-shell{position:relative;min-height:60vh}.docx-preview-loading{align-items:center;color:#475569;display:flex;flex-direction:column;gap:.75rem;justify-content:center;min-height:60vh;text-align:center}.docx-preview-spinner{animation:docx-preview-spin .8s linear infinite;border:3px solid rgba(71,85,105,.15);border-top-color:#2563eb;border-radius:50%;display:inline-block;height:2.25rem;width:2.25rem}.docx-preview-viewer{min-height:60vh;transition:opacity .18s ease}.docx-preview-viewer.is-hidden{opacity:0;pointer-events:none;position:absolute;inset:0}@keyframes docx-preview-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DocxPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DocxPreviewComponent, isStandalone: true, selector: "app-docx-preview", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: false, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, viewQueries: [{ propertyName: "view", first: true, predicate: ["viewer"], descendants: true, isSignal: true }], ngImport: i0, template: "<p-dialog\r\n  [visible]=\"visible\"\r\n  (onHide)=\"onHide()\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '1199px': '75vw', '575px': '90vw' }\"\r\n  [style]=\"{ width: '80vw' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  <ng-template #header>\r\n    <div class=\"flex justify-content-center align-items-center gap-2 px-2\">\r\n      <p-avatar image=\"icon2/word-2019.png\" />\r\n      <span class=\"font-bold\">Vista preliminar del documento</span>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"docx-preview-shell\">\r\n    @if (loading()) {\r\n      <div class=\"docx-preview-loading\">\r\n        <span class=\"docx-preview-spinner\"></span>\r\n        <span>Cargando vista previa del documento...</span>\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      #viewer\r\n      class=\"docx-preview-viewer\"\r\n      [class.is-hidden]=\"loading() && !rendered()\"\r\n    ></div>\r\n  </div>\r\n</p-dialog>\r\n", styles: [".docx-preview-shell{position:relative;min-height:60vh}.docx-preview-loading{align-items:center;color:#475569;display:flex;flex-direction:column;gap:.75rem;justify-content:center;min-height:60vh;text-align:center}.docx-preview-spinner{animation:docx-preview-spin .8s linear infinite;border:3px solid rgba(71,85,105,.15);border-top-color:#2563eb;border-radius:50%;display:inline-block;height:2.25rem;width:2.25rem}.docx-preview-viewer{min-height:60vh;transition:opacity .18s ease}.docx-preview-viewer.is-hidden{opacity:0;pointer-events:none;position:absolute;inset:0}@keyframes docx-preview-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: DocxPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DocxPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-docx-preview', imports: [DialogModule, AvatarModule], template: "<p-dialog\r\n  [visible]=\"visible\"\r\n  (onHide)=\"onHide()\"\r\n  [modal]=\"true\"\r\n  [breakpoints]=\"{ '1199px': '75vw', '575px': '90vw' }\"\r\n  [style]=\"{ width: '80vw' }\"\r\n  [draggable]=\"false\"\r\n  [resizable]=\"false\"\r\n  [closable]=\"true\"\r\n  [maximizable]=\"true\"\r\n>\r\n  <ng-template #header>\r\n    <div class=\"flex justify-content-center align-items-center gap-2 px-2\">\r\n      <p-avatar image=\"icon2/word-2019.png\" />\r\n      <span class=\"font-bold\">Vista preliminar del documento</span>\r\n    </div>\r\n  </ng-template>\r\n  <div class=\"docx-preview-shell\">\r\n    @if (loading()) {\r\n      <div class=\"docx-preview-loading\">\r\n        <span class=\"docx-preview-spinner\"></span>\r\n        <span>Cargando vista previa del documento...</span>\r\n      </div>\r\n    }\r\n\r\n    <div\r\n      #viewer\r\n      class=\"docx-preview-viewer\"\r\n      [class.is-hidden]=\"loading() && !rendered()\"\r\n    ></div>\r\n  </div>\r\n</p-dialog>\r\n", styles: [".docx-preview-shell{position:relative;min-height:60vh}.docx-preview-loading{align-items:center;color:#475569;display:flex;flex-direction:column;gap:.75rem;justify-content:center;min-height:60vh;text-align:center}.docx-preview-spinner{animation:docx-preview-spin .8s linear infinite;border:3px solid rgba(71,85,105,.15);border-top-color:#2563eb;border-radius:50%;display:inline-block;height:2.25rem;width:2.25rem}.docx-preview-viewer{min-height:60vh;transition:opacity .18s ease}.docx-preview-viewer.is-hidden{opacity:0;pointer-events:none;position:absolute;inset:0}@keyframes docx-preview-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { view: [{ type: i0.ViewChild, args: ['viewer', { isSignal: true }] }], visible: [{
@@ -1135,10 +804,10 @@ class PdfPreviewComponent {
     ngOnDestroy() {
         this.limpiarUrlAnterior();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PdfPreviewComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: PdfPreviewComponent, isStandalone: true, selector: "app-pdf-preview", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: PdfPreviewComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: PdfPreviewComponent, isStandalone: true, selector: "app-pdf-preview", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, blob: { classPropertyName: "blob", publicName: "blob", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: DialogModule }, { kind: "component", type: i1$3.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: PdfPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: PdfPreviewComponent, decorators: [{
             type: Component,
             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" }]
         }], ctorParameters: () => [{ type: i1$4.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 }] }] } });
@@ -1242,10 +911,10 @@ class TemplateHighlight {
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: TemplateHighlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: TemplateHighlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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.15", ngImport: i0, type: TemplateHighlight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", 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}: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 }] }] } });
@@ -1254,5 +923,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AppMessageErrorComponent, AppMessageHelpComponent, DateIndicator, DocxPreviewComponent, DsxEnableDisable, DsxStatusToggle, FileComponent, JsonViewerComponent, KpicardComponent, PdfPreviewComponent, TemplateHighlight };
+export { DateIndicator, DocxPreviewComponent, DsxEnableDisable, DsxStatusToggle, JsonViewerComponent, KpicardComponent, PdfPreviewComponent, TemplateHighlight };
 //# sourceMappingURL=ngx-dsxlibrary-src-lib-components.mjs.map