ngx-dsxlibrary 2.21.57 → 2.21.58

package/fesm2022/ngx-dsxlibrary.mjs

@@ -1,7 +1,7 @@
 import * as i1$2 from '@angular/common';
 import { DecimalPipe, CommonModule, AsyncPipe, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, Component, input, forwardRef, viewChild, signal, EventEmitter, effect, Output, model, inject, computed, InjectionToken, Injectable, isDevMode, output, HostBinding, Pipe, ViewEncapsulation, HostListener, Directive, NgModule } from '@angular/core';
+import { Input, Component, input, forwardRef, viewChild, signal, EventEmitter, effect, Output, model, inject, computed, InjectionToken, Injectable, isDevMode, output, HostBinding, Pipe, ViewEncapsulation, HostListener, Directive, NgZone, NgModule } from '@angular/core';
 import * as i1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import * as i1$1 from '@angular/forms';
@@ -52,6 +52,7 @@ import { BadgeModule } from 'primeng/badge';
 import { CardModule } from 'primeng/card';
 import { CheckboxModule } from 'primeng/checkbox';
 import { ContextMenuModule } from 'primeng/contextmenu';
+import { DataViewModule } from 'primeng/dataview';
 import { DatePickerModule } from 'primeng/datepicker';
 import { DividerModule } from 'primeng/divider';
 import { DrawerModule } from 'primeng/drawer';
@@ -3626,6 +3627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * - `refresh` → Recargar datos desde el servidor (morado)
  *
  * **Consulta / Descarga**
+ * - `details`  → Ver el detalle de un registro (azul índigo)
  * - `view`     → Previsualizar o abrir detalle (azul cielo)
  * - `export`   → Exportar información a Excel (verde Excel)
  * - `download` → Descargar archivo o recurso (ámbar cálido)
@@ -3643,6 +3645,7 @@ const ACTION_TYPES = {
     save: 'save',
     update: 'update',
     refresh: 'refresh',
+    details: 'details',
     view: 'view',
     export: 'export',
     download: 'download',
@@ -3761,6 +3764,7 @@ function getActionMessageConfig(action, isActive = true) {
  * | excel     | Verde Excel    | Exportar información a hoja de cálculo            |
  * | download  | Naranja quemado| Descargar archivo o recurso                       |
  * | import    | Azul acero     | Importar información desde archivo                |
+ * | details   | Azul índigo    | Abrir detalle de registro                         |
  */
 const DSX_PALETTE = {
     danger: '#EF5350',
@@ -3776,6 +3780,7 @@ const DSX_PALETTE = {
     excel: '#217346',
     download: '#E65100',
     import: '#546E7A',
+    details: '#3949AB',
     magenta: '#D81B60', // Magenta vibrante
     cyan: '#00BCD4', // Cian brillante
     olive: '#808000', // Verde oliva
@@ -4233,6 +4238,13 @@ const ACTION_CONFIG = {
         tooltip: 'Sincronizar datos',
         outlined: true,
     },
+    details: {
+        label: 'Detalles',
+        icon: 'list',
+        primeIcon: 'pi pi-list',
+        colorToken: 'details',
+        tooltip: 'Detalle de registro',
+    },
     create: {
         label: 'Agregar',
         icon: 'add_box',
@@ -5474,7 +5486,7 @@ class QrGenerator {
         qrImage.src = qrUrl;
         qrImage.onload = () => {
             const qrSize = qrImage.width || 300;
-            const padding = 40;
+            const padding = 20;
             const labelAreaHeight = 70;
             const canvas = document.createElement('canvas');
             canvas.width = qrSize + padding * 2;
@@ -5558,7 +5570,7 @@ class QrGenerator {
         qrImage.src = qrUrl;
         qrImage.onload = () => {
             const qrSize = qrImage.width || 300;
-            const padding = 40; // Aumentamos el margen para las esquinas de enfoque
+            const padding = 20; // Margen compacto para reducir el espacio superior
             const labelAreaHeight = 70;
             const canvas = document.createElement('canvas');
             canvas.width = qrSize + padding * 2;
@@ -5649,11 +5661,11 @@ class QrGenerator {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: QrGenerator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: QrGenerator, isStandalone: true, selector: "dsx-qr-generator", inputs: { codigoQr: { classPropertyName: "codigoQr", publicName: "codigoQr", isSignal: true, isRequired: false, transformFunction: null }, labelQr: { classPropertyName: "labelQr", publicName: "labelQr", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full max-w-xs mx-auto text-center\">\r\n  <!-- Encabezado -->\r\n  <h2 class=\"text-sm font-semibold text-gray-700 mb-2\">\r\n    Generador de C\u00F3digo QR\r\n  </h2>\r\n\r\n  <!-- Valor recibido como validaci\u00F3n (solo lectura) -->\r\n  <p class=\"text-xs text-gray-400 mb-3 truncate\">\r\n    <span class=\"font-medium text-gray-500\">Contenido: </span>{{ textToEncode()\r\n    }}\r\n  </p>\r\n\r\n  <div class=\"qr-preview-shell\">\r\n    @if (loading()) {\r\n    <div class=\"qr-loading-state\">\r\n      <span class=\"qr-spinner\"></span>\r\n      <span>Generando c\u00F3digo QR...</span>\r\n    </div>\r\n    } @if (qrImageUrl()) {\r\n    <div class=\"flex flex-col items-center gap-3 qr-content\">\r\n      <!-- Imagen generada con esquinas y banner -->\r\n      <div\r\n        class=\"rounded-xl border border-gray-200 bg-white p-1 shadow-md inline-block\"\r\n      >\r\n        <img\r\n          [src]=\"qrImageUrl()\"\r\n          alt=\"C\u00F3digo QR\"\r\n          class=\"w-44 h-auto block rounded\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Bot\u00F3n descarga -->\r\n      <button\r\n        style=\"\r\n          background: #059669;\r\n          color: #fff;\r\n          font-size: 0.8rem;\r\n          padding: 0.4rem 1rem;\r\n          border-radius: 0.5rem;\r\n        \"\r\n        class=\"font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-1\"\r\n        (click)=\"downloadWithLabel()\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          style=\"width: 1rem; height: 1rem; flex-shrink: 0\"\r\n          fill=\"none\"\r\n          viewBox=\"0 0 24 24\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n        >\r\n          <path\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            d=\"M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3\"\r\n          />\r\n        </svg>\r\n        Descargar JPEG\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".qr-preview-shell{min-height:15rem}.qr-loading-state{align-items:center;color:#475569;display:flex;flex-direction:column;gap:.75rem;justify-content:center;min-height:15rem;text-align:center}.qr-spinner{animation:qr-spin .8s linear infinite;border:3px solid rgba(71,85,105,.15);border-top-color:#059669;border-radius:50%;display:inline-block;height:2.25rem;width:2.25rem}.qr-content{animation:qr-fade-in .18s ease}@keyframes qr-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes qr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: QrGenerator, isStandalone: true, selector: "dsx-qr-generator", inputs: { codigoQr: { classPropertyName: "codigoQr", publicName: "codigoQr", isSignal: true, isRequired: false, transformFunction: null }, labelQr: { classPropertyName: "labelQr", publicName: "labelQr", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full max-w-xs mx-auto text-center\">\r\n  <!-- Encabezado -->\r\n  <h2 class=\"font-semibold text-gray-500\">Generador QR</h2>\r\n\r\n  <!-- Valor recibido como validaci\u00F3n (solo lectura) -->\r\n  <!-- <p class=\"text-xs text-gray-400 mb-3 truncate\">\r\n    <span class=\"font-medium text-gray-500\">Contenido: </span>{{ textToEncode()\r\n    }}\r\n  </p> -->\r\n\r\n  <div class=\"qr-preview-shell\">\r\n    @if (loading()) {\r\n    <div class=\"qr-loading-state\">\r\n      <span class=\"qr-spinner\"></span>\r\n      <span>Generando c\u00F3digo QR...</span>\r\n    </div>\r\n    } @if (qrImageUrl()) {\r\n    <div class=\"flex flex-col items-center gap-3 qr-content\">\r\n      <!-- Imagen generada con esquinas y banner -->\r\n      <div\r\n        class=\"rounded-xl border border-gray-200 bg-white p-1 shadow-md inline-block\"\r\n      >\r\n        <img\r\n          [src]=\"qrImageUrl()\"\r\n          alt=\"C\u00F3digo QR\"\r\n          class=\"w-44 h-auto block rounded\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Bot\u00F3n descarga -->\r\n      <button\r\n        style=\"\r\n          background: #059669;\r\n          color: #fff;\r\n          font-size: 0.8rem;\r\n          padding: 0.4rem 1rem;\r\n          border-radius: 0.5rem;\r\n          cursor: pointer;\r\n        \"\r\n        class=\"font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-1\"\r\n        (click)=\"downloadWithLabel()\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          style=\"width: 1rem; height: 1rem; flex-shrink: 0\"\r\n          fill=\"none\"\r\n          viewBox=\"0 0 24 24\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n        >\r\n          <path\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            d=\"M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3\"\r\n          />\r\n        </svg>\r\n        Descargar JPEG\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".qr-preview-shell{min-height:15rem}h2{color:#6b7280!important;margin:0 0 .35rem}.qr-loading-state{align-items:center;color:#475569;display:flex;flex-direction:column;gap:.75rem;justify-content:center;min-height:15rem;text-align:center}.qr-spinner{animation:qr-spin .8s linear infinite;border:3px solid rgba(71,85,105,.15);border-top-color:#059669;border-radius:50%;display:inline-block;height:2.25rem;width:2.25rem}.qr-content{animation:qr-fade-in .18s ease}@keyframes qr-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes qr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: QrGenerator, decorators: [{
             type: Component,
-            args: [{ selector: 'dsx-qr-generator', imports: [FormsModule], template: "<div class=\"w-full max-w-xs mx-auto text-center\">\r\n  <!-- Encabezado -->\r\n  <h2 class=\"text-sm font-semibold text-gray-700 mb-2\">\r\n    Generador de C\u00F3digo QR\r\n  </h2>\r\n\r\n  <!-- Valor recibido como validaci\u00F3n (solo lectura) -->\r\n  <p class=\"text-xs text-gray-400 mb-3 truncate\">\r\n    <span class=\"font-medium text-gray-500\">Contenido: </span>{{ textToEncode()\r\n    }}\r\n  </p>\r\n\r\n  <div class=\"qr-preview-shell\">\r\n    @if (loading()) {\r\n    <div class=\"qr-loading-state\">\r\n      <span class=\"qr-spinner\"></span>\r\n      <span>Generando c\u00F3digo QR...</span>\r\n    </div>\r\n    } @if (qrImageUrl()) {\r\n    <div class=\"flex flex-col items-center gap-3 qr-content\">\r\n      <!-- Imagen generada con esquinas y banner -->\r\n      <div\r\n        class=\"rounded-xl border border-gray-200 bg-white p-1 shadow-md inline-block\"\r\n      >\r\n        <img\r\n          [src]=\"qrImageUrl()\"\r\n          alt=\"C\u00F3digo QR\"\r\n          class=\"w-44 h-auto block rounded\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Bot\u00F3n descarga -->\r\n      <button\r\n        style=\"\r\n          background: #059669;\r\n          color: #fff;\r\n          font-size: 0.8rem;\r\n          padding: 0.4rem 1rem;\r\n          border-radius: 0.5rem;\r\n        \"\r\n        class=\"font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-1\"\r\n        (click)=\"downloadWithLabel()\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          style=\"width: 1rem; height: 1rem; flex-shrink: 0\"\r\n          fill=\"none\"\r\n          viewBox=\"0 0 24 24\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n        >\r\n          <path\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            d=\"M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3\"\r\n          />\r\n        </svg>\r\n        Descargar JPEG\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".qr-preview-shell{min-height:15rem}.qr-loading-state{align-items:center;color:#475569;display:flex;flex-direction:column;gap:.75rem;justify-content:center;min-height:15rem;text-align:center}.qr-spinner{animation:qr-spin .8s linear infinite;border:3px solid rgba(71,85,105,.15);border-top-color:#059669;border-radius:50%;display:inline-block;height:2.25rem;width:2.25rem}.qr-content{animation:qr-fade-in .18s ease}@keyframes qr-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes qr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'dsx-qr-generator', imports: [FormsModule], template: "<div class=\"w-full max-w-xs mx-auto text-center\">\r\n  <!-- Encabezado -->\r\n  <h2 class=\"font-semibold text-gray-500\">Generador QR</h2>\r\n\r\n  <!-- Valor recibido como validaci\u00F3n (solo lectura) -->\r\n  <!-- <p class=\"text-xs text-gray-400 mb-3 truncate\">\r\n    <span class=\"font-medium text-gray-500\">Contenido: </span>{{ textToEncode()\r\n    }}\r\n  </p> -->\r\n\r\n  <div class=\"qr-preview-shell\">\r\n    @if (loading()) {\r\n    <div class=\"qr-loading-state\">\r\n      <span class=\"qr-spinner\"></span>\r\n      <span>Generando c\u00F3digo QR...</span>\r\n    </div>\r\n    } @if (qrImageUrl()) {\r\n    <div class=\"flex flex-col items-center gap-3 qr-content\">\r\n      <!-- Imagen generada con esquinas y banner -->\r\n      <div\r\n        class=\"rounded-xl border border-gray-200 bg-white p-1 shadow-md inline-block\"\r\n      >\r\n        <img\r\n          [src]=\"qrImageUrl()\"\r\n          alt=\"C\u00F3digo QR\"\r\n          class=\"w-44 h-auto block rounded\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Bot\u00F3n descarga -->\r\n      <button\r\n        style=\"\r\n          background: #059669;\r\n          color: #fff;\r\n          font-size: 0.8rem;\r\n          padding: 0.4rem 1rem;\r\n          border-radius: 0.5rem;\r\n          cursor: pointer;\r\n        \"\r\n        class=\"font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-1\"\r\n        (click)=\"downloadWithLabel()\"\r\n      >\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          style=\"width: 1rem; height: 1rem; flex-shrink: 0\"\r\n          fill=\"none\"\r\n          viewBox=\"0 0 24 24\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n        >\r\n          <path\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            d=\"M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3\"\r\n          />\r\n        </svg>\r\n        Descargar JPEG\r\n      </button>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".qr-preview-shell{min-height:15rem}h2{color:#6b7280!important;margin:0 0 .35rem}.qr-loading-state{align-items:center;color:#475569;display:flex;flex-direction:column;gap:.75rem;justify-content:center;min-height:15rem;text-align:center}.qr-spinner{animation:qr-spin .8s linear infinite;border:3px solid rgba(71,85,105,.15);border-top-color:#059669;border-radius:50%;display:inline-block;height:2.25rem;width:2.25rem}.qr-content{animation:qr-fade-in .18s ease}@keyframes qr-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes qr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { codigoQr: [{ type: i0.Input, args: [{ isSignal: true, alias: "codigoQr", required: false }] }], labelQr: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelQr", required: false }] }] } });
 
 class TokenPurposeLogin {
@@ -5715,13 +5727,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], ctorParameters: () => [] });
 
 class ScreenInspector {
+    static GRID_STORAGE_KEY = 'dsx-screen-inspector-show-grid';
     width = 0;
     height = 0;
     breakpoint = '';
-    // Detecta automáticamente si la aplicación corre en entorno de desarrollo (npm start / ng serve)
     isDevelopment = false;
+    // Estado para controlar la visibilidad de las líneas guía
+    showGrid = true;
     ngOnInit() {
         this.isDevelopment = isDevMode();
+        if (this.isDevelopment) {
+            this.showGrid = this.readGridStateFromStorage();
+        }
         this.updateDimensions();
     }
     onResize() {
@@ -5729,6 +5746,40 @@ class ScreenInspector {
             this.updateDimensions();
         }
     }
+    // Captura el atajo Alt + Shift + I de forma global
+    handleKeyboardEvent(event) {
+        if (this.isDevelopment &&
+            event.altKey &&
+            event.shiftKey &&
+            (event.key === 'I' || event.key === 'i')) {
+            event.preventDefault(); // Evita cualquier comportamiento secundario
+            this.showGrid = !this.showGrid; // Alterna encendido / apagado
+            this.persistGridState();
+        }
+    }
+    readGridStateFromStorage() {
+        if (typeof window === 'undefined')
+            return true;
+        try {
+            const savedValue = window.localStorage.getItem(ScreenInspector.GRID_STORAGE_KEY);
+            if (savedValue === null)
+                return true;
+            return savedValue === 'true';
+        }
+        catch {
+            return true;
+        }
+    }
+    persistGridState() {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.localStorage.setItem(ScreenInspector.GRID_STORAGE_KEY, String(this.showGrid));
+        }
+        catch {
+            // Ignora errores de almacenamiento (modo privado, cuota, etc.)
+        }
+    }
     updateDimensions() {
         this.width = window.innerWidth;
         this.height = window.innerHeight;
@@ -5748,14 +5799,17 @@ class ScreenInspector {
         return '2XL';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ScreenInspector, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: ScreenInspector, isStandalone: true, selector: "dsx-screen-inspector", host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- CONTROL DE ENTORNO: Solo se dibuja si estamos en modo desarrollo -->\r\n<ng-container *ngIf=\"isDevelopment\">\r\n  <!-- CONTENEDOR GENERAL TOTALMENTE TRANSPARENTE -->\r\n  <div\r\n    style=\"\r\n      position: fixed !important;\r\n      top: 0 !important;\r\n      left: 0 !important;\r\n      width: 100vw !important;\r\n      height: 100vh !important;\r\n      z-index: 999999 !important;\r\n      background-color: transparent !important;\r\n      pointer-events: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      overflow: hidden;\r\n    \"\r\n  >\r\n    <!-- CONTENEDOR DE CONTENIDO CENTRAL -->\r\n    <div\r\n      style=\"\r\n        position: relative;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-align: center;\r\n        pointer-events: none;\r\n        width: 100%;\r\n      \"\r\n    >\r\n      <!-- LETRAS GIGANTES EN NEGRO CON OPACIDAD (M\u00C1SCARA LIMPIA) -->\r\n      <h1\r\n        style=\"\r\n          font-size: 35vw !important;\r\n          font-weight: 900 !important;\r\n          font-family:\r\n            system-ui,\r\n            -apple-system,\r\n            sans-serif !important;\r\n          color: rgba(0, 0, 0, 0.02) !important;\r\n          margin: 0;\r\n          padding: 0;\r\n          line-height: 0.8;\r\n          letter-spacing: -0.05em;\r\n          text-transform: uppercase;\r\n        \"\r\n      >\r\n        {{ breakpoint }}\r\n      </h1>\r\n\r\n      <!-- CUADRO DE DI\u00C1LOGO DE LAS MEDIDAS EXACTAS -->\r\n      <div\r\n        style=\"\r\n          margin-top: 20px;\r\n          background-color: #111827;\r\n          border: 2px solid rgba(0, 0, 0, 0.15);\r\n          border-radius: 12px;\r\n          padding: 12px 32px;\r\n          font-family: monospace;\r\n          font-size: 22px;\r\n          font-weight: bold;\r\n          color: #34d399;\r\n          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\r\n          backdrop-filter: blur(8px);\r\n          pointer-events: auto;\r\n        \"\r\n      >\r\n        {{ width }}<span\r\n          style=\"\r\n            color: rgba(255, 255, 255, 0.5);\r\n            font-size: 16px;\r\n            font-weight: normal;\r\n            margin-left: 4px;\r\n          \"\r\n          >px ancho</span\r\n        >\r\n        <span style=\"color: rgba(255, 255, 255, 0.3); margin: 0 16px\">|</span>\r\n        {{ height }}<span\r\n          style=\"\r\n            color: rgba(255, 255, 255, 0.5);\r\n            font-size: 16px;\r\n            font-weight: normal;\r\n            margin-left: 4px;\r\n          \"\r\n          >px alto</span\r\n        >\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ScreenInspector, isStandalone: true, selector: "dsx-screen-inspector", host: { listeners: { "window:resize": "onResize()", "window:keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<!-- CONTROL DE ENTORNO: Solo se dibuja si estamos en modo desarrollo -->\r\n@if(isDevelopment){\r\n<ng-container>\r\n  <!-- CONTENEDOR GENERAL TOTALMENTE TRANSPARENTE -->\r\n  <div\r\n    style=\"\r\n      position: fixed !important;\r\n      top: 0 !important;\r\n      left: 0 !important;\r\n      width: 100vw !important;\r\n      height: 100vh !important;\r\n      z-index: 999999 !important;\r\n      background-color: transparent !important;\r\n      pointer-events: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      overflow: hidden;\r\n    \"\r\n  >\r\n    <!-- REGLA MILIM\u00C9TRICA CONDICIONAL -->\r\n    @if(showGrid) {\r\n    <div class=\"inspector-ruler\"></div>\r\n    }\r\n\r\n    <!-- CONTENEDOR DE CONTENIDO CENTRAL -->\r\n    <div\r\n      style=\"\r\n        position: relative;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-align: center;\r\n        pointer-events: none;\r\n        width: 100%;\r\n      \"\r\n    >\r\n      <!-- LETRAS GIGANTES EN NEGRO CON OPACIDAD -->\r\n      <h1\r\n        style=\"\r\n          font-size: 35vw !important;\r\n          font-weight: 900 !important;\r\n          font-family:\r\n            system-ui,\r\n            -apple-system,\r\n            sans-serif !important;\r\n          color: rgba(0, 0, 0, 0.05) !important;\r\n          margin: 0;\r\n          padding: 0;\r\n          line-height: 0.8;\r\n          letter-spacing: -0.05em;\r\n          text-transform: uppercase;\r\n        \"\r\n      >\r\n        {{ breakpoint }}\r\n      </h1>\r\n\r\n      <!-- CUADRO DE DI\u00C1LOGO DE LAS MEDIDAS EXACTAS -->\r\n      <div\r\n        style=\"\r\n          margin-top: 20px;\r\n          background-color: #111827;\r\n          border: 2px solid rgba(0, 0, 0, 0.15);\r\n          border-radius: 12px;\r\n          padding: 12px 32px;\r\n          font-family: monospace;\r\n          font-size: 22px;\r\n          font-weight: bold;\r\n          color: #34d399;\r\n          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\r\n          backdrop-filter: blur(8px);\r\n          pointer-events: auto;\r\n          display: flex;\r\n          flex-direction: column;\r\n          align-items: center;\r\n          gap: 4px;\r\n        \"\r\n      >\r\n        <div>\r\n          {{ width }}<span\r\n            style=\"\r\n              color: rgba(255, 255, 255, 0.5);\r\n              font-size: 16px;\r\n              font-weight: normal;\r\n              margin-left: 4px;\r\n            \"\r\n            >px ancho</span\r\n          >\r\n          <span style=\"color: rgba(255, 255, 255, 0.3); margin: 0 16px\">|</span>\r\n          {{ height }}<span\r\n            style=\"\r\n              color: rgba(255, 255, 255, 0.5);\r\n              font-size: 16px;\r\n              font-weight: normal;\r\n              margin-left: 4px;\r\n            \"\r\n            >px alto</span\r\n          >\r\n        </div>\r\n\r\n        <!-- Recordatorio del atajo de teclado con tipograf\u00EDa peque\u00F1a -->\r\n        <span\r\n          style=\"\r\n            color: rgba(255, 255, 255, 0.35);\r\n            font-size: 11px;\r\n            font-weight: normal;\r\n            letter-spacing: 0.5px;\r\n          \"\r\n        >\r\n          Presiona\r\n          <b style=\"color: #f3f4f6; font-weight: bold\">Alt + Shift + I</b> para\r\n          ocultar/mostrar cuadr\u00EDcula\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n}\r\n", styles: [".inspector-ruler{position:absolute!important;top:0!important;left:0!important;width:100vw!important;height:100%!important;background-color:transparent!important;pointer-events:none!important;background-image:linear-gradient(to right,rgba(0,0,0,.15) 1px,transparent 1px),linear-gradient(to bottom,rgba(220,38,38,.45) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.4) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.15) 1px,transparent 1px);background-size:45px 100%,100% 100px,100% 50px,100% 10px!important}.inspector-ruler:after{content:\"0\\a\\a\\a\\a\\a\\a\\a\\a\\a 100\\a\\a\\a\\a\\a\\a\\a\\a\\a 200\\a\\a\\a\\a\\a\\a\\a\\a\\a 300\\a\\a\\a\\a\\a\\a\\a\\a\\a 400\\a\\a\\a\\a\\a\\a\\a\\a\\a 500\\a\\a\\a\\a\\a\\a\\a\\a\\a 600\\a\\a\\a\\a\\a\\a\\a\\a\\a 700\\a\\a\\a\\a\\a\\a\\a\\a\\a 800\\a\\a\\a\\a\\a\\a\\a\\a\\a 900\\a\\a\\a\\a\\a\\a\\a\\a\\a 1000\\a\\a\\a\\a\\a\\a\\a\\a\\a 1100\\a\\a\\a\\a\\a\\a\\a\\a\\a 1200\"!important;white-space:pre!important;font-family:monospace!important;font-size:10px!important;font-weight:700!important;color:#374151!important;line-height:10px!important;position:absolute!important;top:0!important;left:6px!important;z-index:10!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ScreenInspector, decorators: [{
             type: Component,
-            args: [{ selector: 'dsx-screen-inspector', imports: [CommonModule], template: "<!-- CONTROL DE ENTORNO: Solo se dibuja si estamos en modo desarrollo -->\r\n<ng-container *ngIf=\"isDevelopment\">\r\n  <!-- CONTENEDOR GENERAL TOTALMENTE TRANSPARENTE -->\r\n  <div\r\n    style=\"\r\n      position: fixed !important;\r\n      top: 0 !important;\r\n      left: 0 !important;\r\n      width: 100vw !important;\r\n      height: 100vh !important;\r\n      z-index: 999999 !important;\r\n      background-color: transparent !important;\r\n      pointer-events: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      overflow: hidden;\r\n    \"\r\n  >\r\n    <!-- CONTENEDOR DE CONTENIDO CENTRAL -->\r\n    <div\r\n      style=\"\r\n        position: relative;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-align: center;\r\n        pointer-events: none;\r\n        width: 100%;\r\n      \"\r\n    >\r\n      <!-- LETRAS GIGANTES EN NEGRO CON OPACIDAD (M\u00C1SCARA LIMPIA) -->\r\n      <h1\r\n        style=\"\r\n          font-size: 35vw !important;\r\n          font-weight: 900 !important;\r\n          font-family:\r\n            system-ui,\r\n            -apple-system,\r\n            sans-serif !important;\r\n          color: rgba(0, 0, 0, 0.02) !important;\r\n          margin: 0;\r\n          padding: 0;\r\n          line-height: 0.8;\r\n          letter-spacing: -0.05em;\r\n          text-transform: uppercase;\r\n        \"\r\n      >\r\n        {{ breakpoint }}\r\n      </h1>\r\n\r\n      <!-- CUADRO DE DI\u00C1LOGO DE LAS MEDIDAS EXACTAS -->\r\n      <div\r\n        style=\"\r\n          margin-top: 20px;\r\n          background-color: #111827;\r\n          border: 2px solid rgba(0, 0, 0, 0.15);\r\n          border-radius: 12px;\r\n          padding: 12px 32px;\r\n          font-family: monospace;\r\n          font-size: 22px;\r\n          font-weight: bold;\r\n          color: #34d399;\r\n          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\r\n          backdrop-filter: blur(8px);\r\n          pointer-events: auto;\r\n        \"\r\n      >\r\n        {{ width }}<span\r\n          style=\"\r\n            color: rgba(255, 255, 255, 0.5);\r\n            font-size: 16px;\r\n            font-weight: normal;\r\n            margin-left: 4px;\r\n          \"\r\n          >px ancho</span\r\n        >\r\n        <span style=\"color: rgba(255, 255, 255, 0.3); margin: 0 16px\">|</span>\r\n        {{ height }}<span\r\n          style=\"\r\n            color: rgba(255, 255, 255, 0.5);\r\n            font-size: 16px;\r\n            font-weight: normal;\r\n            margin-left: 4px;\r\n          \"\r\n          >px alto</span\r\n        >\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'dsx-screen-inspector', imports: [CommonModule], template: "<!-- CONTROL DE ENTORNO: Solo se dibuja si estamos en modo desarrollo -->\r\n@if(isDevelopment){\r\n<ng-container>\r\n  <!-- CONTENEDOR GENERAL TOTALMENTE TRANSPARENTE -->\r\n  <div\r\n    style=\"\r\n      position: fixed !important;\r\n      top: 0 !important;\r\n      left: 0 !important;\r\n      width: 100vw !important;\r\n      height: 100vh !important;\r\n      z-index: 999999 !important;\r\n      background-color: transparent !important;\r\n      pointer-events: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      overflow: hidden;\r\n    \"\r\n  >\r\n    <!-- REGLA MILIM\u00C9TRICA CONDICIONAL -->\r\n    @if(showGrid) {\r\n    <div class=\"inspector-ruler\"></div>\r\n    }\r\n\r\n    <!-- CONTENEDOR DE CONTENIDO CENTRAL -->\r\n    <div\r\n      style=\"\r\n        position: relative;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-align: center;\r\n        pointer-events: none;\r\n        width: 100%;\r\n      \"\r\n    >\r\n      <!-- LETRAS GIGANTES EN NEGRO CON OPACIDAD -->\r\n      <h1\r\n        style=\"\r\n          font-size: 35vw !important;\r\n          font-weight: 900 !important;\r\n          font-family:\r\n            system-ui,\r\n            -apple-system,\r\n            sans-serif !important;\r\n          color: rgba(0, 0, 0, 0.05) !important;\r\n          margin: 0;\r\n          padding: 0;\r\n          line-height: 0.8;\r\n          letter-spacing: -0.05em;\r\n          text-transform: uppercase;\r\n        \"\r\n      >\r\n        {{ breakpoint }}\r\n      </h1>\r\n\r\n      <!-- CUADRO DE DI\u00C1LOGO DE LAS MEDIDAS EXACTAS -->\r\n      <div\r\n        style=\"\r\n          margin-top: 20px;\r\n          background-color: #111827;\r\n          border: 2px solid rgba(0, 0, 0, 0.15);\r\n          border-radius: 12px;\r\n          padding: 12px 32px;\r\n          font-family: monospace;\r\n          font-size: 22px;\r\n          font-weight: bold;\r\n          color: #34d399;\r\n          box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\r\n          backdrop-filter: blur(8px);\r\n          pointer-events: auto;\r\n          display: flex;\r\n          flex-direction: column;\r\n          align-items: center;\r\n          gap: 4px;\r\n        \"\r\n      >\r\n        <div>\r\n          {{ width }}<span\r\n            style=\"\r\n              color: rgba(255, 255, 255, 0.5);\r\n              font-size: 16px;\r\n              font-weight: normal;\r\n              margin-left: 4px;\r\n            \"\r\n            >px ancho</span\r\n          >\r\n          <span style=\"color: rgba(255, 255, 255, 0.3); margin: 0 16px\">|</span>\r\n          {{ height }}<span\r\n            style=\"\r\n              color: rgba(255, 255, 255, 0.5);\r\n              font-size: 16px;\r\n              font-weight: normal;\r\n              margin-left: 4px;\r\n            \"\r\n            >px alto</span\r\n          >\r\n        </div>\r\n\r\n        <!-- Recordatorio del atajo de teclado con tipograf\u00EDa peque\u00F1a -->\r\n        <span\r\n          style=\"\r\n            color: rgba(255, 255, 255, 0.35);\r\n            font-size: 11px;\r\n            font-weight: normal;\r\n            letter-spacing: 0.5px;\r\n          \"\r\n        >\r\n          Presiona\r\n          <b style=\"color: #f3f4f6; font-weight: bold\">Alt + Shift + I</b> para\r\n          ocultar/mostrar cuadr\u00EDcula\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n}\r\n", styles: [".inspector-ruler{position:absolute!important;top:0!important;left:0!important;width:100vw!important;height:100%!important;background-color:transparent!important;pointer-events:none!important;background-image:linear-gradient(to right,rgba(0,0,0,.15) 1px,transparent 1px),linear-gradient(to bottom,rgba(220,38,38,.45) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.4) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.15) 1px,transparent 1px);background-size:45px 100%,100% 100px,100% 50px,100% 10px!important}.inspector-ruler:after{content:\"0\\a\\a\\a\\a\\a\\a\\a\\a\\a 100\\a\\a\\a\\a\\a\\a\\a\\a\\a 200\\a\\a\\a\\a\\a\\a\\a\\a\\a 300\\a\\a\\a\\a\\a\\a\\a\\a\\a 400\\a\\a\\a\\a\\a\\a\\a\\a\\a 500\\a\\a\\a\\a\\a\\a\\a\\a\\a 600\\a\\a\\a\\a\\a\\a\\a\\a\\a 700\\a\\a\\a\\a\\a\\a\\a\\a\\a 800\\a\\a\\a\\a\\a\\a\\a\\a\\a 900\\a\\a\\a\\a\\a\\a\\a\\a\\a 1000\\a\\a\\a\\a\\a\\a\\a\\a\\a 1100\\a\\a\\a\\a\\a\\a\\a\\a\\a 1200\"!important;white-space:pre!important;font-family:monospace!important;font-size:10px!important;font-weight:700!important;color:#374151!important;line-height:10px!important;position:absolute!important;top:0!important;left:6px!important;z-index:10!important}\n"] }]
         }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
+            }], handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
             }] } });
 
 /**
@@ -5929,6 +5983,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 args: ['keydown', ['$event']]
             }] } });
 
+class ScrollTableService {
+    /**
+     * Calcula la altura disponible para el scrollHeight de una tabla
+     * @param element El elemento nativo HTML desde donde se empieza a contar
+     * @param marginBottom Margen de seguridad inferior (por defecto 75px para paginadores)
+     * @param minHeight Altura mínima permitida para evitar valores muy pequeños o negativos
+     */
+    calculateAvailableHeight(element, marginBottom = 75, minHeight = 300) {
+        const safeMinHeight = Number.isFinite(minHeight)
+            ? Math.max(100, Math.floor(minHeight))
+            : 300;
+        const safeMarginBottom = Number.isFinite(marginBottom)
+            ? Math.max(0, Math.floor(marginBottom))
+            : 75;
+        if (!element)
+            return `${safeMinHeight}px`;
+        // Medición exacta de todos los píxeles consumidos hacia arriba
+        const rect = element.getBoundingClientRect();
+        const pixelesConsumidosArriba = rect.top;
+        // Altura utilizable actual de la ventana
+        const alturaTotalPantalla = window.innerHeight;
+        // Restamos la parte superior y el margen de abajo
+        const alturaResultante = alturaTotalPantalla - pixelesConsumidosArriba - safeMarginBottom;
+        // Retorna el string con el formato "000px" requerido por PrimeNG
+        const alturaFinal = Math.max(alturaResultante, safeMinHeight);
+        return `${Math.floor(alturaFinal)}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ScrollTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ScrollTableService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ScrollTableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AutoScrollHeightDirective {
+    el;
+    static INITIAL_RECALC_DELAYS_MS = [120, 300];
+    static INITIAL_STABILIZATION_MS = 360;
+    // Te permite personalizar el margen desde el HTML si una tabla usa paginador y otra no
+    marginBottom = input(75, ...(ngDevMode ? [{ debugName: "marginBottom" }] : /* istanbul ignore next */ []));
+    // Altura mínima de seguridad para evitar valores demasiado pequeños
+    minHeight = input(300, ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    // Evento que emite el string de píxeles resultante (ej: "520px")
+    heightCalculated = output();
+    ngZone = inject(NgZone);
+    scrollService = inject(ScrollTableService);
+    resizeObserver;
+    rafId = null;
+    lastEmittedHeight = null;
+    pendingTimeouts = new Set();
+    isInitializing = true;
+    pendingInitialHeight = null;
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterViewInit() {
+        this.setupLayoutObservers();
+        this.scheduleInitialRecalcular();
+    }
+    ngOnDestroy() {
+        this.teardownLayoutObservers();
+        this.cancelPendingRaf();
+        this.clearPendingTimeouts();
+    }
+    // Escucha global del cambio de monitor o tamaño de ventana
+    onResize() {
+        this.scheduleRecalcular();
+    }
+    setupLayoutObservers() {
+        if (typeof window === 'undefined')
+            return;
+        // Detecta cambios de tamaño del host.
+        this.resizeObserver = new ResizeObserver(() => this.scheduleRecalcular());
+        this.resizeObserver.observe(this.el.nativeElement);
+    }
+    teardownLayoutObservers() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+    }
+    scheduleInitialRecalcular() {
+        this.scheduleRecalcular();
+        for (const delayMs of AutoScrollHeightDirective.INITIAL_RECALC_DELAYS_MS) {
+            this.scheduleRecalcularAfter(delayMs);
+        }
+        this.scheduleFinishInitialization(AutoScrollHeightDirective.INITIAL_STABILIZATION_MS);
+    }
+    scheduleFinishInitialization(delayMs) {
+        if (typeof window === 'undefined')
+            return;
+        const timeoutId = window.setTimeout(() => {
+            this.pendingTimeouts.delete(timeoutId);
+            this.isInitializing = false;
+            // Emite una sola vez el último valor estable de la fase inicial.
+            if (this.pendingInitialHeight !== null) {
+                if (this.lastEmittedHeight !== this.pendingInitialHeight) {
+                    this.lastEmittedHeight = this.pendingInitialHeight;
+                    this.emitHeight(this.pendingInitialHeight);
+                }
+                this.pendingInitialHeight = null;
+            }
+        }, delayMs);
+        this.pendingTimeouts.add(timeoutId);
+    }
+    scheduleRecalcularAfter(delayMs) {
+        if (typeof window === 'undefined')
+            return;
+        const timeoutId = window.setTimeout(() => {
+            this.pendingTimeouts.delete(timeoutId);
+            this.scheduleRecalcular();
+        }, delayMs);
+        this.pendingTimeouts.add(timeoutId);
+    }
+    clearPendingTimeouts() {
+        for (const timeoutId of this.pendingTimeouts) {
+            window.clearTimeout(timeoutId);
+        }
+        this.pendingTimeouts.clear();
+    }
+    scheduleRecalcular() {
+        if (typeof window === 'undefined')
+            return;
+        this.cancelPendingRaf();
+        this.rafId = window.requestAnimationFrame(() => {
+            this.rafId = null;
+            this.recalcular();
+        });
+    }
+    cancelPendingRaf() {
+        if (this.rafId === null)
+            return;
+        window.cancelAnimationFrame(this.rafId);
+        this.rafId = null;
+    }
+    recalcular() {
+        const alturaCalculada = this.scrollService.calculateAvailableHeight(this.el.nativeElement, this.marginBottom(), this.minHeight());
+        if (this.isInitializing) {
+            this.pendingInitialHeight = alturaCalculada;
+            return;
+        }
+        // Evita emisiones repetidas del mismo valor cuando hay muchos cambios de DOM.
+        if (this.lastEmittedHeight === alturaCalculada)
+            return;
+        this.lastEmittedHeight = alturaCalculada;
+        this.emitHeight(alturaCalculada);
+    }
+    emitHeight(value) {
+        if (NgZone.isInAngularZone()) {
+            this.heightCalculated.emit(value);
+            return;
+        }
+        this.ngZone.run(() => {
+            this.heightCalculated.emit(value);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AutoScrollHeightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: AutoScrollHeightDirective, isStandalone: true, selector: "[appAutoScrollHeight]", inputs: { marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { heightCalculated: "heightCalculated" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: AutoScrollHeightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appAutoScrollHeight]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { marginBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "marginBottom", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], heightCalculated: [{ type: i0.Output, args: ["heightCalculated"] }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
 /**
  * Directiva que permite solo la entrada de:
  * - Dígitos (0-9)
@@ -6551,6 +6775,7 @@ const PRIME_NG_MODULES = [
     CardModule,
     CheckboxModule,
     ContextMenuModule,
+    DataViewModule,
     DatePickerModule,
     DialogModule,
     DividerModule,
@@ -6609,6 +6834,7 @@ class PrimeNgModule {
             CardModule,
             CheckboxModule,
             ContextMenuModule,
+            DataViewModule,
             DatePickerModule,
             DialogModule,
             DividerModule,
@@ -6664,6 +6890,7 @@ class PrimeNgModule {
             CardModule,
             CheckboxModule,
             ContextMenuModule,
+            DataViewModule,
             DatePickerModule,
             DialogModule,
             DividerModule,
@@ -8506,5 +8733,5 @@ function minimumAgeValidator(minimumAge, referenceDate) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, AppMessageHelpComponent, ArrowNavigationDirective, AuthorizeService, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxButtonComponent, DsxEnableDisable, DsxMessagesService, DsxStatusToggle, DteService, ENVIRONMENT, EndpointService, ErrorHandlerService, FileComponent, GTQFormatter, HeaderDsx, HelpersService, HttpHelpersService, INITIAL_PARAMETERS, IcoLabel, IconDsxComponent, JoinByPipe, JsonHighlightPipe, JsonValuesDebujComponent, JsonViewerComponent, KpicardComponent, LoadingComponent, LoadingLottieComponent, LogoDsxComponent, MasterDetailChangeService, NavbarDsxComponent, NetworkStatusComponent, OnlyRangoPatternDirective, ParameterValuesService, PdfPreviewComponent, PrimeNgModule, QrGenerator, SWEET_ALERT_THEMES, ScreenInspector, SecurityService, SelectAllOnFocusDirective, ServiceResultFileService, SpinnerLoadingService, SweetAlert2DialogService, TemplateHighlight, TokenPurposeLogin, TruncatePipe, UtilityAddService, asyncExistsValidator, atLeastOneFieldRequiredValidator, chainControlGroups, createCurrencyFormatter, createInitialCache, createTypedCacheProvider, cuiValidator, dateMinMaxValidator, dateRangeValidator, dateRangeValidatorFromTo, developmentEnvironment, getActionMessageConfig, getZeroBasedRolIndex, guardTokenPurposeGuard, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, templateStructureValidator, templateVariablesValidator, validateEnvironmentConfig };
+export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, AppMessageHelpComponent, ArrowNavigationDirective, AuthorizeService, AutoScrollHeightDirective, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxButtonComponent, DsxEnableDisable, DsxMessagesService, DsxStatusToggle, DteService, ENVIRONMENT, EndpointService, ErrorHandlerService, FileComponent, GTQFormatter, HeaderDsx, HelpersService, HttpHelpersService, INITIAL_PARAMETERS, IcoLabel, IconDsxComponent, JoinByPipe, JsonHighlightPipe, JsonValuesDebujComponent, JsonViewerComponent, KpicardComponent, LoadingComponent, LoadingLottieComponent, LogoDsxComponent, MasterDetailChangeService, NavbarDsxComponent, NetworkStatusComponent, OnlyRangoPatternDirective, ParameterValuesService, PdfPreviewComponent, PrimeNgModule, QrGenerator, SWEET_ALERT_THEMES, ScreenInspector, SecurityService, SelectAllOnFocusDirective, ServiceResultFileService, SpinnerLoadingService, SweetAlert2DialogService, TemplateHighlight, TokenPurposeLogin, TruncatePipe, UtilityAddService, asyncExistsValidator, atLeastOneFieldRequiredValidator, chainControlGroups, createCurrencyFormatter, createInitialCache, createTypedCacheProvider, cuiValidator, dateMinMaxValidator, dateRangeValidator, dateRangeValidatorFromTo, developmentEnvironment, getActionMessageConfig, getZeroBasedRolIndex, guardTokenPurposeGuard, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, templateStructureValidator, templateVariablesValidator, validateEnvironmentConfig };
 //# sourceMappingURL=ngx-dsxlibrary.mjs.map