ngx-dsxlibrary 2.21.42 → 2.21.44

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

@@ -115,10 +115,10 @@ class AppMessageErrorComponent {
         }
         return this.defaultFloatLabelErrorSpace;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", 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.12", type: AppMessageErrorComponent, isStandalone: true, selector: "app-message-error", inputs: { control: "control", form: "form" }, ngImport: i0, template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n  @if (isControlErrorVisible()) {\r\n    <div class=\"dsx-error-message\">\r\n      <i\r\n        class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n      @if (control?.errors?.[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n        <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDate\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minimumAge\"]) {\r\n        <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ control?.errors?.[\"min\"]?.min }}</strong>\r\n      } @else if (control?.errors?.[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ control?.errors?.[\"max\"]?.max | number: \"1.2-2\" }}</strong>\r\n      } @else if (control?.errors?.[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control?.errors?.[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n        <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        Existe un error a\u00FAn no identificado.\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n<!-- mensaje para formulario en general -->\r\n@if (form?.invalid && form?.touched) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ form?.getError(\"atLeastOneRequired\")?.message }}</p-tag\r\n      >\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.dsx-error-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-error-slot.is-visible{max-height:4.25rem;margin-top:.3rem;opacity:1}.dsx-error-message{--dsx-error-color: #b42318;--dsx-error-bg: #fff2f0;color:var(--dsx-error-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.75rem,.72rem + .12vw,.8125rem);font-weight:400;line-height:1.35;letter-spacing:.01em;display:flex;align-items:center;gap:.35rem;position:relative;z-index:1;padding:.2rem .45rem;border-left:3px solid var(--dsx-error-color);border-radius:0 6px 6px 0;background:var(--dsx-error-bg);box-shadow:0 1px 2px #00000014;max-width:min(40ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-error-message strong{font-weight:500}.dsx-error-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-error-color)}.dsx-error-slot.is-visible .dsx-error-message{transform:translateY(0)}@media(max-width:640px){.dsx-error-slot.is-visible{max-height:5rem}.dsx-error-message{max-width:100%}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{max-height:none;margin-top:.25rem;overflow:visible;opacity:0;transform:translateY(-3px);transition:opacity .16s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-error-message{max-width:min(40ch,calc(100% - .25rem))}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppMessageErrorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: AppMessageErrorComponent, isStandalone: true, selector: "app-message-error", inputs: { control: "control", form: "form" }, ngImport: i0, template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n  @if (isControlErrorVisible()) {\r\n    <div class=\"dsx-error-message\">\r\n      <i\r\n        class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n      @if (control?.errors?.[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n        <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDate\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minimumAge\"]) {\r\n        <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ control?.errors?.[\"min\"]?.min }}</strong>\r\n      } @else if (control?.errors?.[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ control?.errors?.[\"max\"]?.max | number: \"1.2-2\" }}</strong>\r\n      } @else if (control?.errors?.[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control?.errors?.[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n        <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        Existe un error a\u00FAn no identificado.\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n<!-- mensaje para formulario en general -->\r\n@if (form?.invalid && form?.touched) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ form?.getError(\"atLeastOneRequired\")?.message }}</p-tag\r\n      >\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.dsx-error-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-error-slot.is-visible{max-height:4.25rem;margin-top:.3rem;opacity:1}.dsx-error-message{--dsx-error-color: #b42318;--dsx-error-bg: #fff2f0;color:var(--dsx-error-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.75rem,.72rem + .12vw,.8125rem);font-weight:400;line-height:1.35;letter-spacing:.01em;display:flex;align-items:center;gap:.35rem;position:relative;z-index:1;padding:.2rem .45rem;border-left:3px solid var(--dsx-error-color);border-radius:0 6px 6px 0;background:var(--dsx-error-bg);box-shadow:0 1px 2px #00000014;max-width:min(40ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-error-message strong{font-weight:500}.dsx-error-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-error-color)}.dsx-error-slot.is-visible .dsx-error-message{transform:translateY(0)}@media(max-width:640px){.dsx-error-slot.is-visible{max-height:5rem}.dsx-error-message{max-width:100%}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{max-height:none;margin-top:.25rem;overflow:visible;opacity:0;transform:translateY(-3px);transition:opacity .16s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-error-message{max-width:min(40ch,calc(100% - .25rem))}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "component", type: i1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: AppMessageErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: AppMessageErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-message-error', imports: [TagModule, DecimalPipe], template: "<div class=\"dsx-error-slot\" [class.is-visible]=\"isControlErrorVisible()\">\r\n  @if (isControlErrorVisible()) {\r\n    <div class=\"dsx-error-message\">\r\n      <i\r\n        class=\"pi pi-exclamation-triangle dsx-error-icon\"\r\n        aria-hidden=\"true\"\r\n      ></i>\r\n      @if (control?.errors?.[\"required\"]) {\r\n        El campo <strong>es requerido.</strong>\r\n      } @else if (control?.errors?.[\"invalidNIT\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidNIT\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidCUI\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidCUI\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDateRange\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDateRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"dateNotRange\"]) {\r\n        <strong>{{ control?.errors?.[\"dateNotRange\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidDate\"]) {\r\n        <strong>{{ control?.errors?.[\"invalidDate\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minimumAge\"]) {\r\n        <strong>{{ control?.errors?.[\"minimumAge\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"minlength\"]) {\r\n        Debe tener al menos\r\n        <strong>{{ control?.errors?.[\"minlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"maxlength\"]) {\r\n        Debe tener como m\u00E1ximo\r\n        <strong>{{ control?.errors?.[\"maxlength\"]?.requiredLength }}</strong>\r\n        caracteres.\r\n      } @else if (control?.errors?.[\"min\"]) {\r\n        El valor m\u00EDnimo permitido es\r\n        <strong>{{ control?.errors?.[\"min\"]?.min }}</strong>\r\n      } @else if (control?.errors?.[\"max\"]) {\r\n        El valor m\u00E1ximo permitido es\r\n        <strong>{{ control?.errors?.[\"max\"]?.max | number: \"1.2-2\" }}</strong>\r\n      } @else if (control?.errors?.[\"email\"]) {\r\n        Debe ser una direcci\u00F3n de correo v\u00E1lida.\r\n      } @else if (control?.errors?.[\"pattern\"]) {\r\n        El campo no tiene el formato requerido.\r\n      } @else if (control?.errors?.[\"alreadyValueExists\"]) {\r\n        <strong>{{ control?.errors?.[\"alreadyValueExists\"]?.message }}</strong>\r\n      } @else if (control?.errors?.[\"invalidTemplateVariables\"]) {\r\n        <div class=\"dsx-template-error\">\r\n          <strong>\r\n            {{ control?.errors?.[\"invalidTemplateVariables\"]?.message }}\r\n          </strong>\r\n          @if (control?.errors?.[\"invalidTemplateVariables\"]?.details?.length) {\r\n            <span class=\"dsx-template-error-detail\">\r\n              {{ control?.errors?.[\"invalidTemplateVariables\"]?.details?.[0] }}\r\n            </span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        Existe un error a\u00FAn no identificado.\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n<!-- mensaje para formulario en general -->\r\n@if (form?.invalid && form?.touched) {\r\n  <div class=\"mt-2 mb-2\">\r\n    @if (this.form?.errors?.[\"atLeastOneRequired\"]) {\r\n      <p-tag severity=\"danger\" [rounded]=\"true\">\r\n        {{ form?.getError(\"atLeastOneRequired\")?.message }}</p-tag\r\n      >\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.dsx-error-slot{max-height:0;margin-top:0;overflow:hidden;opacity:0;transition:max-height .22s ease,margin-top .22s ease,opacity .18s ease}.dsx-error-slot.is-visible{max-height:4.25rem;margin-top:.3rem;opacity:1}.dsx-error-message{--dsx-error-color: #b42318;--dsx-error-bg: #fff2f0;color:var(--dsx-error-color);font-family:Roboto,Montserrat,sans-serif;font-size:clamp(.75rem,.72rem + .12vw,.8125rem);font-weight:400;line-height:1.35;letter-spacing:.01em;display:flex;align-items:center;gap:.35rem;position:relative;z-index:1;padding:.2rem .45rem;border-left:3px solid var(--dsx-error-color);border-radius:0 6px 6px 0;background:var(--dsx-error-bg);box-shadow:0 1px 2px #00000014;max-width:min(40ch,100%);white-space:normal;word-break:break-word;transform:translateY(-2px);transition:transform .2s ease}.dsx-error-message strong{font-weight:500}.dsx-error-icon{flex-shrink:0;font-size:.78rem;line-height:1;color:var(--dsx-error-color)}.dsx-error-slot.is-visible .dsx-error-message{transform:translateY(0)}@media(max-width:640px){.dsx-error-slot.is-visible{max-height:5rem}.dsx-error-message{max-width:100%}}:host-context(.p-floatlabel){position:absolute;top:100%;left:0;width:100%;z-index:3;pointer-events:none}:host-context(.p-floatlabel) .dsx-error-slot{max-height:none;margin-top:.25rem;overflow:visible;opacity:0;transform:translateY(-3px);transition:opacity .16s ease,transform .18s ease}:host-context(.p-floatlabel) .dsx-error-slot.is-visible{opacity:1;transform:translateY(0)}:host-context(.p-floatlabel) .dsx-error-message{max-width:min(40ch,calc(100% - .25rem))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { control: [{
@@ -152,8 +152,8 @@ class DsxStatusToggle {
         this.onChange(value);
         this.onTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DsxStatusToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: DsxStatusToggle, isStandalone: true, selector: "dsx-status-toggle", inputs: { onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsxStatusToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: DsxStatusToggle, isStandalone: true, selector: "dsx-status-toggle", inputs: { onLabel: { classPropertyName: "onLabel", publicName: "onLabel", isSignal: true, isRequired: false, transformFunction: null }, offLabel: { classPropertyName: "offLabel", publicName: "offLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DsxStatusToggle),
@@ -161,7 +161,7 @@ class DsxStatusToggle {
             },
         ], ngImport: i0, template: "<p-toggleButton\r\n  fluid\r\n  [ngModel]=\"value\"\r\n  (ngModelChange)=\"change($event)\"\r\n  [onLabel]=\"onLabel()\"\r\n  [offLabel]=\"offLabel()\"\r\n  [disabled]=\"disabled() || formDisabled\"\r\n  [onIcon]=\"'pi pi-check-circle'\"\r\n  [offIcon]=\"'pi pi-times-circle'\"\r\n  class=\"dsx-status-toggle\"\r\n/>\r\n", styles: [":host ::ng-deep .dsx-status-toggle .p-button-label{font-weight:700!important}:host ::ng-deep .dsx-status-toggle.p-highlight,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked,:host ::ng-deep .dsx-status-toggle[aria-pressed=true],:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-label,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-label,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-label,:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-icon,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-icon,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-icon,:host ::ng-deep .dsx-status-toggle.p-highlight .p-button-icon:before,:host ::ng-deep .dsx-status-toggle.p-togglebutton-checked .p-button-icon:before,:host ::ng-deep .dsx-status-toggle[aria-pressed=true] .p-button-icon:before{color:#16a34a!important}:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked),:host ::ng-deep .dsx-status-toggle[aria-pressed=false],:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-label,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-label,:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-icon,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-icon,:host ::ng-deep .dsx-status-toggle:not(.p-highlight):not(.p-togglebutton-checked) .p-button-icon:before,:host ::ng-deep .dsx-status-toggle[aria-pressed=false] .p-button-icon:before{color:#dc2626!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "component", type: i2.ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DsxStatusToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsxStatusToggle, decorators: [{
             type: Component,
             args: [{ selector: 'dsx-status-toggle', imports: [FormsModule, ToggleButtonModule], providers: [
                         {
@@ -180,8 +180,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.12", ngImport: i0, type: DsxEnableDisable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: DsxEnableDisable, isStandalone: true, selector: "dsx-checkbox", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsxEnableDisable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: DsxEnableDisable, isStandalone: true, selector: "dsx-checkbox", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DsxEnableDisable),
@@ -189,7 +189,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.12", ngImport: i0, type: DsxEnableDisable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DsxEnableDisable, decorators: [{
             type: Component,
             args: [{ selector: 'dsx-checkbox', imports: [], providers: [
                         {
@@ -243,8 +243,8 @@ class FileComponent {
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", 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),
@@ -252,7 +252,7 @@ class FileComponent {
             },
         ], 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.12", ngImport: i0, type: FileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dsx-file-upload', imports: [FileUpload], providers: [
                         {
@@ -672,8 +672,8 @@ class JsonViewerComponent {
             return value;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", 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.13", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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),
@@ -681,7 +681,7 @@ class JsonViewerComponent {
             },
         ], 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: JsonViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: JsonViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-json-viewer', standalone: true, imports: [CommonModule, TreeModule], providers: [
                         {
@@ -752,10 +752,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.12", ngImport: i0, type: DateIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", 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.13", ngImport: i0, type: DateIndicator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DateIndicator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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 }] }] } });
@@ -811,10 +811,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.12", ngImport: i0, type: KpicardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", 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.13", ngImport: i0, type: KpicardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", 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.12", ngImport: i0, type: KpicardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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 }] }] } });
@@ -822,6 +822,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class DocxPreviewComponent {
     view = viewChild('viewer', ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
     visibleState = signal(false, ...(ngDevMode ? [{ debugName: "visibleState" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    rendered = signal(false, ...(ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []));
     renderToken = 0;
     set visible(value) {
         this.visibleState.set(!!value);
@@ -840,18 +842,19 @@ class DocxPreviewComponent {
                 return;
             }
             if (!isVisible) {
-                this.renderToken++;
-                container.innerHTML = '';
+                this.resetViewer(container);
                 return;
             }
+            this.loading.set(true);
+            this.rendered.set(false);
             if (!(fileBlob instanceof Blob)) {
-                this.renderToken++;
+                this.finishWithFallback(container);
                 container.innerHTML =
                     '<p>No hay un archivo .docx válido para previsualizar.</p>';
                 return;
             }
             if (!fileBlob.size) {
-                this.renderToken++;
+                this.finishWithFallback(container);
                 container.innerHTML = '<p>El archivo .docx está vacío.</p>';
                 return;
             }
@@ -865,18 +868,32 @@ class DocxPreviewComponent {
             void this.renderDocx(fileBlob, container, options, token);
         });
     }
+    resetViewer(container) {
+        this.renderToken++;
+        this.loading.set(false);
+        this.rendered.set(false);
+        container.innerHTML = '';
+    }
+    finishWithFallback(container) {
+        this.renderToken++;
+        this.loading.set(false);
+        this.rendered.set(true);
+        container.innerHTML = '';
+    }
     async renderDocx(fileBlob, container, options, token) {
         try {
-            // Import dinámico directo: esbuild/Vite lo interceptan en build time.
-            // Si el consumidor no instaló docx-preview, el catch captura el error
-            // y muestra el mensaje de fallback sin romper el resto de la librería.
+            const viteDocxModulePath = '/@id/docx-preview';
+            // Import dinámico en runtime para mantener docx-preview como peer opcional.
             const docxPreviewModule = (await import(
-            // @ts-ignore — peer opcional; puede no existir en todos los consumidores
-            'docx-preview'));
+            /* @vite-ignore */ viteDocxModulePath));
             if (token !== this.renderToken || !this.visibleState()) {
                 return;
             }
             await docxPreviewModule.renderAsync(fileBlob, container, undefined, options);
+            if (token === this.renderToken && this.visibleState()) {
+                this.loading.set(false);
+                this.rendered.set(true);
+            }
         }
         catch (error) {
             if (token !== this.renderToken || !this.visibleState()) {
@@ -885,6 +902,8 @@ class DocxPreviewComponent {
             console.error('[DocxPreview] Error al renderizar el archivo DOCX.', error);
             container.innerHTML =
                 '<p>No se pudo renderizar la vista previa DOCX. Verifica la consola para más detalles.</p>';
+            this.loading.set(false);
+            this.rendered.set(true);
         }
     }
     onHide() {
@@ -895,12 +914,12 @@ class DocxPreviewComponent {
         }
         this.visibleChange.emit(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DocxPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", 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 #viewer></div>\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"] }, { 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.13", ngImport: i0, type: DocxPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.12", ngImport: i0, type: DocxPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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 #viewer></div>\r\n</p-dialog>\r\n" }]
+            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: [{
                 type: Input
             }], visibleChange: [{
@@ -951,10 +970,10 @@ class PdfPreviewComponent {
     ngOnDestroy() {
         this.limpiarUrlAnterior();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: PdfPreviewComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", 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.13", ngImport: i0, type: PdfPreviewComponent, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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.12", ngImport: i0, type: PdfPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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 }] }] } });
@@ -1013,10 +1032,10 @@ class TemplateHighlight {
     escapeAttr(text) {
         return text.replace(/"/g, '&quot;');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TemplateHighlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TemplateHighlight, isStandalone: true, selector: "dsx-template-highlight", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, allowedKeys: { classPropertyName: "allowedKeys", publicName: "allowedKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-tabs value=\"0\">\r\n  <p-tablist>\r\n    <p-tab value=\"0\">\r\n      <i class=\"pi pi-file-edit tab-icon\" aria-hidden=\"true\"></i>\r\n      <span>Preliminar</span>\r\n    </p-tab>\r\n    <p-tab value=\"1\">\r\n      <i class=\"pi pi-list tab-icon\" aria-hidden=\"true\"></i>\r\n      <span>Variables</span>\r\n    </p-tab>\r\n  </p-tablist>\r\n  <p-tabpanels>\r\n    <p-tabpanel value=\"0\">\r\n      <div class=\"template-highlight\" [innerHTML]=\"highlightedText()\"></div>\r\n    </p-tabpanel>\r\n    <p-tabpanel value=\"1\">\r\n      @if (allowedKeys().length) {\r\n      <ul class=\"template-vars-list\">\r\n        @for (key of allowedKeys(); track key) {\r\n        <li>\r\n          <strong>{{ key }}</strong>\r\n        </li>\r\n        }\r\n      </ul>\r\n      }\r\n    </p-tabpanel>\r\n  </p-tabpanels>\r\n</p-tabs>\r\n", styles: [":host .template-highlight{white-space:pre-wrap;font-family:monospace;text-align:justify}:host .template-vars-list{margin:0 0 .65rem;padding-left:1rem}:host .template-vars-list li{margin:.15rem 0}:host .tab-icon{margin-right:.45rem}:host ::ng-deep .var-valid{color:#0a7a0a;background:#e6ffe6;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .var-invalid{color:#b30000;background:#ffe6e6;border-radius:3px;padding:0 2px;font-weight:600;text-decoration:underline wavy #b30000;cursor:help}:host ::ng-deep .var-brace-error{color:#cc7a00;background:#fff2cc;border-radius:3px;padding:0 2px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: TabsModule }, { kind: "component", type: i1$5.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1$5.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.TabList, selector: "p-tablist" }, { kind: "component", type: i1$5.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TemplateHighlight, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TemplateHighlight, isStandalone: true, selector: "dsx-template-highlight", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, allowedKeys: { classPropertyName: "allowedKeys", publicName: "allowedKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<p-tabs value=\"0\">\r\n  <p-tablist>\r\n    <p-tab value=\"0\">\r\n      <i class=\"pi pi-file-edit tab-icon\" aria-hidden=\"true\"></i>\r\n      <span>Preliminar</span>\r\n    </p-tab>\r\n    <p-tab value=\"1\">\r\n      <i class=\"pi pi-list tab-icon\" aria-hidden=\"true\"></i>\r\n      <span>Variables</span>\r\n    </p-tab>\r\n  </p-tablist>\r\n  <p-tabpanels>\r\n    <p-tabpanel value=\"0\">\r\n      <div class=\"template-highlight\" [innerHTML]=\"highlightedText()\"></div>\r\n    </p-tabpanel>\r\n    <p-tabpanel value=\"1\">\r\n      @if (allowedKeys().length) {\r\n      <ul class=\"template-vars-list\">\r\n        @for (key of allowedKeys(); track key) {\r\n        <li>\r\n          <strong>{{ key }}</strong>\r\n        </li>\r\n        }\r\n      </ul>\r\n      }\r\n    </p-tabpanel>\r\n  </p-tabpanels>\r\n</p-tabs>\r\n", styles: [":host .template-highlight{white-space:pre-wrap;font-family:monospace;text-align:justify}:host .template-vars-list{margin:0 0 .65rem;padding-left:1rem}:host .template-vars-list li{margin:.15rem 0}:host .tab-icon{margin-right:.45rem}:host ::ng-deep .var-valid{color:#0a7a0a;background:#e6ffe6;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .var-invalid{color:#b30000;background:#ffe6e6;border-radius:3px;padding:0 2px;font-weight:600;text-decoration:underline wavy #b30000;cursor:help}:host ::ng-deep .var-brace-error{color:#cc7a00;background:#fff2cc;border-radius:3px;padding:0 2px;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: TabsModule }, { kind: "component", type: i1$5.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1$5.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i1$5.TabList, selector: "p-tablist" }, { kind: "component", type: i1$5.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TemplateHighlight, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TemplateHighlight, decorators: [{
             type: Component,
             args: [{ selector: 'dsx-template-highlight', imports: [TabsModule], template: "<p-tabs value=\"0\">\r\n  <p-tablist>\r\n    <p-tab value=\"0\">\r\n      <i class=\"pi pi-file-edit tab-icon\" aria-hidden=\"true\"></i>\r\n      <span>Preliminar</span>\r\n    </p-tab>\r\n    <p-tab value=\"1\">\r\n      <i class=\"pi pi-list tab-icon\" aria-hidden=\"true\"></i>\r\n      <span>Variables</span>\r\n    </p-tab>\r\n  </p-tablist>\r\n  <p-tabpanels>\r\n    <p-tabpanel value=\"0\">\r\n      <div class=\"template-highlight\" [innerHTML]=\"highlightedText()\"></div>\r\n    </p-tabpanel>\r\n    <p-tabpanel value=\"1\">\r\n      @if (allowedKeys().length) {\r\n      <ul class=\"template-vars-list\">\r\n        @for (key of allowedKeys(); track key) {\r\n        <li>\r\n          <strong>{{ key }}</strong>\r\n        </li>\r\n        }\r\n      </ul>\r\n      }\r\n    </p-tabpanel>\r\n  </p-tabpanels>\r\n</p-tabs>\r\n", styles: [":host .template-highlight{white-space:pre-wrap;font-family:monospace;text-align:justify}:host .template-vars-list{margin:0 0 .65rem;padding-left:1rem}:host .template-vars-list li{margin:.15rem 0}:host .tab-icon{margin-right:.45rem}:host ::ng-deep .var-valid{color:#0a7a0a;background:#e6ffe6;border-radius:3px;padding:0 2px;font-weight:600}:host ::ng-deep .var-invalid{color:#b30000;background:#ffe6e6;border-radius:3px;padding:0 2px;font-weight:600;text-decoration:underline wavy #b30000;cursor:help}:host ::ng-deep .var-brace-error{color:#cc7a00;background:#fff2cc;border-radius:3px;padding:0 2px;font-weight:600}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], allowedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedKeys", required: false }] }] } });