ngx-dsxlibrary 2.21.69 → 2.21.71

package/fesm2022/ngx-dsxlibrary.mjs

@@ -32,9 +32,6 @@ import { Button, ButtonModule } from 'primeng/button';
 import moment from 'moment-timezone';
 import { ToastrService } from 'ngx-toastr';
 import Swal from 'sweetalert2';
-import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
-import * as i6 from 'primeng/floatlabel';
-import { FloatLabel, FloatLabelModule } from 'primeng/floatlabel';
 import { FileUpload, FileUploadModule } from 'primeng/fileupload';
 import { LottieComponent } from 'ngx-lottie';
 import { createTimeline } from 'animejs';
@@ -44,9 +41,12 @@ import * as i4 from 'primeng/menubar';
 import { MenubarModule } from 'primeng/menubar';
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { CookieService } from 'ngx-cookie-service';
+import * as i6 from 'primeng/floatlabel';
+import { FloatLabelModule, FloatLabel } from 'primeng/floatlabel';
 import * as i7 from 'primeng/password';
 import { PasswordModule } from 'primeng/password';
 import { AccordionModule } from 'primeng/accordion';
+import { AutoCompleteModule, AutoComplete } from 'primeng/autocomplete';
 import { AutoFocusModule } from 'primeng/autofocus';
 import { AvatarGroupModule } from 'primeng/avatargroup';
 import { BadgeModule } from 'primeng/badge';
@@ -2184,6 +2184,181 @@ function provideEnvironment(environment) {
     };
 }
 
+/**
+ * action-message.model.ts
+ *
+ * Centraliza los tipos de acción y la configuración de mensajes para acciones de botones y operaciones comunes en la UI.
+ *
+ * - Define los tipos de acción estándar usados en dsx-button y otros componentes.
+ * - Permite mantener uniformidad y evitar errores por typos en los tipos de acción.
+ * - Provee la función getActionMessageConfig para obtener los textos, títulos e íconos de confirmación según la acción y el estado.
+ * - Si se usa una acción válida pero sin mensaje configurado, en modo desarrollo muestra un warning para facilitar el mantenimiento.
+ *
+ * Uso recomendado:
+ *   - Importa ACTION_TYPES y ActionType donde se requiera validar o tipar acciones de botones.
+ *   - Usa getActionMessageConfig para obtener la configuración de confirmación antes de ejecutar acciones destructivas o de restauración.
+ *
+ * Ejemplo:
+ *   import { ACTION_TYPES, ActionType, getActionMessageConfig } from '.../action-message.model';
+ *   const config = getActionMessageConfig('softDelete', true);
+ *   // config: { title, message, icon }
+ *
+ * Si agregas un nuevo tipo de acción, recuerda añadir su mensaje en getActionMessageConfig.
+ */
+/**
+ * Tipos de acción disponibles para el componente `dsx-button`.
+ *
+ * Usa `ACTION_TYPES` en el consumidor para evitar typos.
+ *
+ * **Persistencia de datos (formulario)**
+ * - `create`      → Navega a la ruta de nuevo registro (azul)
+ * - `saveOrUpdate` → Muestra "Guardar" si `id` es 0, "Actualizar" si `id` > 0 (amarillo)
+ *
+ * **Eliminar**
+ * - `delete`     → Eliminar registro permanentemente (rojo)
+ * - `softDelete` → Borrar registro con borrado lógico (amarillo)
+ *
+ * **Formulario**
+ * - `validate` → Validar formulario sin guardar (gris)
+ * - `restore`  → Restaurar datos originales (gris)
+ *
+ * **Navegación / Utilidades**
+ * - `home`    → Ir al inicio (gris)
+ * - `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)
+ * - `import`   → Importar datos desde archivo (azul acero)
+ */
+const ACTION_TYPES = {
+    hardDelete: 'hardDelete',
+    softDelete: 'softDelete',
+    return: 'return',
+    home: 'home',
+    validate: 'validate',
+    restore: 'restore',
+    edit: 'edit',
+    create: 'create',
+    save: 'save',
+    update: 'update',
+    refresh: 'refresh',
+    details: 'details',
+    view: 'view',
+    export: 'export',
+    download: 'download',
+    import: 'import',
+};
+function getActionMessageConfig(action, secondArg, thirdArg) {
+    const isActive = action === 'softDelete' || action === 'hardDelete'
+        ? typeof secondArg === 'boolean'
+            ? secondArg
+            : true
+        : true;
+    const dataPreview = action === 'softDelete' || action === 'hardDelete'
+        ? thirdArg
+        : typeof secondArg === 'string'
+            ? secondArg
+            : undefined;
+    // Valores por defecto para todas las propiedades
+    const defaults = {
+        title: '',
+        message: '',
+        icon: undefined,
+        confirmButtonText: undefined,
+        cancelButtonText: undefined,
+        showConfirmButton: undefined,
+        showCancelButton: undefined,
+    };
+    if (action === 'softDelete') {
+        if (isActive) {
+            return {
+                ...defaults,
+                title: '¿Borrar registro?',
+                message: 'El registro dejará de estar disponible en las listas principales.' +
+                    (dataPreview ? `<br>${dataPreview}` : ''),
+                icono: 'icon/trash-bin.png',
+                confirmButtonText: 'Eliminar',
+                cancelButtonText: 'Cancelar',
+                showConfirmButton: true,
+                showCancelButton: true,
+            };
+        }
+        else {
+            return {
+                ...defaults,
+                title: '¿Restaurar registro?',
+                message: 'El registro volverá a estar <strong>activo</strong> y visible en todas las listas principales del sistema.' +
+                    (dataPreview ? `<br>${dataPreview}` : ''),
+                icono: 'icon/documentation.png',
+                confirmButtonText: 'Sí, restaurar',
+                cancelButtonText: 'Dejar archivado',
+                showConfirmButton: true,
+                showCancelButton: true,
+            };
+        }
+    }
+    if (action === 'hardDelete') {
+        return {
+            ...defaults,
+            title: '¿Eliminar permanentemente?',
+            message: 'Esta acción <strong>no se puede deshacer</strong>. Se perderán todos los datos asociados a este registro de forma inmediata.' +
+                (dataPreview ? `<br>${dataPreview}` : ''),
+            icono: 'icon/delete.png',
+            confirmButtonText: 'Eliminar permanentemente',
+            cancelButtonText: 'Cancelar',
+            showConfirmButton: true,
+            showCancelButton: true,
+        };
+    }
+    if (action === 'save') {
+        return {
+            ...defaults,
+            title: '¿Guardar registro?',
+            message: 'El nuevo registro se guardará en el sistema.' +
+                (dataPreview ? `<br>${dataPreview}` : ''),
+            icono: 'icon2/save_2029637.png',
+            confirmButtonText: 'Guardar',
+            cancelButtonText: 'Cancelar',
+            showConfirmButton: true,
+            showCancelButton: true,
+        };
+    }
+    if (action === 'update') {
+        return {
+            ...defaults,
+            title: '¿Actualizar registro?',
+            message: 'Los cambios realizados se actualizarán en el sistema.' +
+                (dataPreview ? `<br>${dataPreview}` : ''),
+            icono: 'icon2/save_2029637.png',
+            confirmButtonText: 'Actualizar',
+            cancelButtonText: 'Cancelar',
+            showConfirmButton: true,
+            showCancelButton: true,
+        };
+    }
+    if (action === 'restore') {
+        return {
+            ...defaults,
+            title: '¿Revertir cambios?',
+            message: 'Se perderán todos los cambios que hayas realizado en el formulario y se volverán a cargar los datos originales.',
+            icono: 'icon/data-recovery.png',
+            confirmButtonText: 'Restaurar',
+            cancelButtonText: 'Cancelar',
+            showConfirmButton: true,
+            showCancelButton: true,
+        };
+    }
+    if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+        console.warn(`[getActionMessageConfig] Acción "${action}" existe pero no tiene mensaje configurado. ` +
+            'Agrega la configuración correspondiente para evitar este warning.');
+    }
+    // Retorna los valores por defecto si la acción no es válida
+    return { ...defaults };
+}
+
 const INITIAL_PARAMETERS = new InjectionToken('InitialParameters');
 
 /**
@@ -4103,222 +4278,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }] });
 
 /**
- * action-message.model.ts
- *
- * Centraliza los tipos de acción y la configuración de mensajes para acciones de botones y operaciones comunes en la UI.
- *
- * - Define los tipos de acción estándar usados en dsx-button y otros componentes.
- * - Permite mantener uniformidad y evitar errores por typos en los tipos de acción.
- * - Provee la función getActionMessageConfig para obtener los textos, títulos e íconos de confirmación según la acción y el estado.
- * - Si se usa una acción válida pero sin mensaje configurado, en modo desarrollo muestra un warning para facilitar el mantenimiento.
- *
- * Uso recomendado:
- *   - Importa ACTION_TYPES y ActionType donde se requiera validar o tipar acciones de botones.
- *   - Usa getActionMessageConfig para obtener la configuración de confirmación antes de ejecutar acciones destructivas o de restauración.
- *
- * Ejemplo:
- *   import { ACTION_TYPES, ActionType, getActionMessageConfig } from '.../action-message.model';
- *   const config = getActionMessageConfig('softDelete', true);
- *   // config: { title, message, icon }
- *
- * Si agregas un nuevo tipo de acción, recuerda añadir su mensaje en getActionMessageConfig.
- */
-/**
- * Tipos de acción disponibles para el componente `dsx-button`.
- *
- * Usa `ACTION_TYPES` en el consumidor para evitar typos.
- *
- * **Persistencia de datos (formulario)**
- * - `create`      → Navega a la ruta de nuevo registro (azul)
- * - `saveOrUpdate` → Muestra "Guardar" si `id` es 0, "Actualizar" si `id` > 0 (amarillo)
- *
- * **Eliminar**
- * - `delete`     → Eliminar registro permanentemente (rojo)
- * - `softDelete` → Borrar registro con borrado lógico (amarillo)
- *
- * **Formulario**
- * - `validate` → Validar formulario sin guardar (gris)
- * - `restore`  → Restaurar datos originales (gris)
+ * Paleta corporativa de colores para `dsx-button`.
  *
- * **Navegación / Utilidades**
- * - `home`    → Ir al inicio (gris)
- * - `refresh` → Recargar datos desde el servidor (morado)
+ * Cada token tiene un significado semántico fijo. Úsala como referencia
+ * para asignar `colorToken` al añadir nuevos tipos de botón.
  *
- * **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)
- * - `import`   → Importar datos desde archivo (azul acero)
- */
-const ACTION_TYPES = {
-    hardDelete: 'hardDelete',
-    softDelete: 'softDelete',
-    return: 'return',
-    home: 'home',
-    validate: 'validate',
-    restore: 'restore',
-    edit: 'edit',
-    create: 'create',
-    save: 'save',
-    update: 'update',
-    refresh: 'refresh',
-    details: 'details',
-    view: 'view',
-    export: 'export',
-    download: 'download',
-    import: 'import',
-};
-function getActionMessageConfig(action, secondArg, thirdArg) {
-    const isActive = action === 'softDelete' || action === 'hardDelete'
-        ? typeof secondArg === 'boolean'
-            ? secondArg
-            : true
-        : true;
-    const dataPreview = action === 'softDelete' || action === 'hardDelete'
-        ? thirdArg
-        : typeof secondArg === 'string'
-            ? secondArg
-            : undefined;
-    // Valores por defecto para todas las propiedades
-    const defaults = {
-        title: '',
-        message: '',
-        icon: undefined,
-        confirmButtonText: undefined,
-        cancelButtonText: undefined,
-        showConfirmButton: undefined,
-        showCancelButton: undefined,
-    };
-    if (action === 'softDelete') {
-        if (isActive) {
-            return {
-                ...defaults,
-                title: '¿Borrar registro?',
-                message: 'El registro dejará de estar disponible en las listas principales.' +
-                    (dataPreview ? `<br>${dataPreview}` : ''),
-                icono: 'icon/trash-bin.png',
-                confirmButtonText: 'Eliminar',
-                cancelButtonText: 'Cancelar',
-                showConfirmButton: true,
-                showCancelButton: true,
-            };
-        }
-        else {
-            return {
-                ...defaults,
-                title: '¿Restaurar registro?',
-                message: 'El registro volverá a estar <strong>activo</strong> y visible en todas las listas principales del sistema.' +
-                    (dataPreview ? `<br>${dataPreview}` : ''),
-                icono: 'icon/documentation.png',
-                confirmButtonText: 'Sí, restaurar',
-                cancelButtonText: 'Dejar archivado',
-                showConfirmButton: true,
-                showCancelButton: true,
-            };
-        }
-    }
-    if (action === 'hardDelete') {
-        return {
-            ...defaults,
-            title: '¿Eliminar permanentemente?',
-            message: 'Esta acción <strong>no se puede deshacer</strong>. Se perderán todos los datos asociados a este registro de forma inmediata.' +
-                (dataPreview ? `<br>${dataPreview}` : ''),
-            icono: 'icon/delete.png',
-            confirmButtonText: 'Eliminar permanentemente',
-            cancelButtonText: 'Cancelar',
-            showConfirmButton: true,
-            showCancelButton: true,
-        };
-    }
-    if (action === 'save') {
-        return {
-            ...defaults,
-            title: '¿Guardar registro?',
-            message: 'El nuevo registro se guardará en el sistema.' +
-                (dataPreview ? `<br>${dataPreview}` : ''),
-            icono: 'icon2/save_2029637.png',
-            confirmButtonText: 'Guardar',
-            cancelButtonText: 'Cancelar',
-            showConfirmButton: true,
-            showCancelButton: true,
-        };
-    }
-    if (action === 'update') {
-        return {
-            ...defaults,
-            title: '¿Actualizar registro?',
-            message: 'Los cambios realizados se actualizarán en el sistema.' +
-                (dataPreview ? `<br>${dataPreview}` : ''),
-            icono: 'icon2/save_2029637.png',
-            confirmButtonText: 'Actualizar',
-            cancelButtonText: 'Cancelar',
-            showConfirmButton: true,
-            showCancelButton: true,
-        };
-    }
-    if (action === 'restore') {
-        return {
-            ...defaults,
-            title: '¿Revertir cambios?',
-            message: 'Se perderán todos los cambios que hayas realizado en el formulario y se volverán a cargar los datos originales.',
-            icono: 'icon/data-recovery.png',
-            confirmButtonText: 'Restaurar',
-            cancelButtonText: 'Cancelar',
-            showConfirmButton: true,
-            showCancelButton: true,
-        };
-    }
-    if (typeof ngDevMode !== 'undefined' && ngDevMode) {
-        console.warn(`[getActionMessageConfig] Acción "${action}" existe pero no tiene mensaje configurado. ` +
-            'Agrega la configuración correspondiente para evitar este warning.');
-    }
-    // Retorna los valores por defecto si la acción no es válida
-    return { ...defaults };
-}
-
-/**
- * Paleta corporativa de colores para `dsx-button`.
- *
- * Cada token tiene un significado semántico fijo. Úsala como referencia
- * para asignar `colorToken` al añadir nuevos tipos de botón.
- *
- * | Token     | Color          | Uso semántico                                     |
- * |-----------|----------------|---------------------------------------------------|
- * | danger    | Coral rojo     | Acción destructiva e irreversible (eliminar)      |
- * | warning   | Naranja cálido | Acción con riesgo moderado / borrado lógico       |
- * | caution   | Ámbar dorado   | Requiere verificación del usuario (actualizar)    |
- * | success   | Verde menta    | Guardar nuevo registro / agregar                  |
- * | primary   | Azul claro     | Editar / navegar con contexto de registro         |
- * | info      | Cian suave     | Recargar datos / refrescar vista                  |
- * | neutral   | Gris azulado   | Acción secundaria / navegación sin contexto       |
- * | restore   | Violeta suave  | Deshacer / restaurar estado anterior              |
- * | view      | Teal profundo  | Ver / previsualizar detalle                       |
- * | 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                         |
+ * | Token     | Color          | Uso semántico                                     |
+ * |-----------|----------------|---------------------------------------------------|
+ * | danger    | Coral rojo     | Acción destructiva e irreversible (eliminar)      |
+ * | warning   | Naranja cálido | Acción con riesgo moderado / borrado lógico       |
+ * | caution   | Ámbar dorado   | Requiere verificación del usuario (actualizar)    |
+ * | success   | Verde menta    | Guardar nuevo registro / agregar                  |
+ * | primary   | Azul claro     | Editar / navegar con contexto de registro         |
+ * | info      | Cian suave     | Recargar datos / refrescar vista                  |
+ * | neutral   | Gris azulado   | Acción secundaria / navegación sin contexto       |
+ * | restore   | Violeta suave  | Deshacer / restaurar estado anterior              |
+ * | view      | Teal profundo  | Ver / previsualizar detalle                       |
+ * | 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',
     warning: '#FF7043',
     caution: '#FFB300',
-    success: '#0ba055', // Verde para Guardar
-    primary: '#0066cc', // Azul para Actualizar
+    success: '#0ba055',
+    primary: '#0066cc',
     info: '#26C6DA',
     neutral: '#90A4AE',
-    restore: '#B0BEC5', // Gris suave, menos resaltado
-    return: '#11438d', // Azul violeta para "Regresar registro archivado"
+    restore: '#B0BEC5',
+    return: '#11438d',
     view: '#00838F',
     excel: '#217346',
     download: '#E65100',
     import: '#546E7A',
     details: '#3949AB',
-    magenta: '#D81B60', // Magenta vibrante
-    cyan: '#00BCD4', // Cian brillante
-    olive: '#808000', // Verde oliva
-    brown: '#8D6E63', // Marrón suave
-    slate: '#607D8B', // Azul pizarra
+    magenta: '#D81B60',
+    cyan: '#00BCD4',
+    olive: '#808000',
+    brown: '#8D6E63',
+    slate: '#607D8B',
 };
 /** Tipos que necesitan un `[id]` mayor a 0 para poder mostrarse. */
 const TYPES_REQUIRING_ID = [
@@ -4331,23 +4331,56 @@ class DsxButtonComponent {
     renderCount = 0;
     _paramService = inject((ParameterValuesService));
     _router = inject(Router);
-    // Agrega un input para el tamaño
+    _isDev = isDevMode();
+    lastValidationState = null;
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _environment = inject(ENVIRONMENT, {
         optional: true,
     });
     constructor() {
-        if (isDevMode()) {
+        // Solo activar efectos de debug en desarrollo
+        if (this._isDev) {
+            // Efecto principal que captura todo el estado
             effect(() => {
                 if (!this.debug())
                     return;
                 this.renderCount++;
-                console.log(`[dsx-button:${this.type()}] render #${this.renderCount}`, {
-                    id: this.id(),
-                    type: this.type(),
-                    disabled: this.disabled(),
-                    routerLink: this.routerLink(),
-                });
+                this.logFullState();
+            });
+            // Efecto específico para validaciones
+            effect(() => {
+                if (!this.debug())
+                    return;
+                const visible = this.visible();
+                const validations = {
+                    global: this.passesGlobalVisibilityPolicy(),
+                    parameter: this.passesParameterValidation(),
+                    id: this.passesIdValidation(),
+                    visible,
+                };
+                const stateKey = JSON.stringify(validations);
+                if (stateKey !== this.lastValidationState) {
+                    this.lastValidationState = stateKey;
+                    this.logValidationIssues(validations);
+                }
+            });
+            // Efecto para detectar problemas con IDs
+            effect(() => {
+                if (!this.debug())
+                    return;
+                const type = this.type();
+                if (TYPES_REQUIRING_ID.includes(type)) {
+                    const id = this.getNormalizedId();
+                    const routeId = this.getIdFromNavigationTarget(this.effectiveRouterLink());
+                    if (!id && !routeId) {
+                        console.warn(`%c⚠️ [dsx-button:${type}] ID no disponible para acción que lo requiere`, 'color:#ed6c02;font-weight:bold', {
+                            type,
+                            explicitId: this.id(),
+                            routeId,
+                            requireIdInput: this.requireIdInput(),
+                        });
+                    }
+                }
             });
         }
     }
@@ -4357,17 +4390,7 @@ class DsxButtonComponent {
     type = input(ACTION_TYPES.hardDelete, ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     routerLink = input(undefined, ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
-    /**
-     * Ruta de navegación simplificada. La `/` inicial se agrega automáticamente.
-     * Cada segmento solo admite: letras, números, `-`, `_`, `.` y `:` (params de ruta).
-     * Ejemplos válidos:   `'home'`, `'container/nuevo'`, `'item/123'`
-     * Ejemplos inválidos: `'item/*'`, `'item?foo=bar'`, `'item/../other'`
-     * Para rutas dinámicas complejas usa `[routerLink]` directamente.
-     */
     routerPath = input(undefined, ...(ngDevMode ? [{ debugName: "routerPath" }] : /* istanbul ignore next */ []));
-    /** Ancho del botón. Usa `rem` para que escale con la preferencia de fuente del usuario.
-     *  Ejemplo: `'8rem'`, `'12rem'`. Valor por defecto: `'9rem'`.
-     */
     width = input('9rem', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
     iconOnlyWidth = input('2.5rem', ...(ngDevMode ? [{ debugName: "iconOnlyWidth" }] : /* istanbul ignore next */ []));
@@ -4383,24 +4406,12 @@ class DsxButtonComponent {
     tooltipOverride = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipOverride" }] : /* istanbul ignore next */ []));
     iconOverride = input(undefined, ...(ngDevMode ? [{ debugName: "iconOverride" }] : /* istanbul ignore next */ []));
     primeIconOverride = input(undefined, ...(ngDevMode ? [{ debugName: "primeIconOverride" }] : /* istanbul ignore next */ []));
-    /** Permite personalizar el color usando únicamente tokens de la paleta DSX. */
     colorOverride = input(undefined, ...(ngDevMode ? [{ debugName: "colorOverride" }] : /* istanbul ignore next */ []));
-    /** Permite forzar estilo outlined o sólido por instancia. */
     outlinedOverride = input(undefined, ...(ngDevMode ? [{ debugName: "outlinedOverride" }] : /* istanbul ignore next */ []));
-    /**
-     * Override por instancia para el botón `validate`.
-     * Tiene prioridad sobre `environment.showValidateButton`.
-     */
     showValidateButtonOverride = input(undefined, ...(ngDevMode ? [{ debugName: "showValidateButtonOverride" }] : /* istanbul ignore next */ []));
-    /**
-     * Override por instancia para el botón `restore`.
-     * Tiene prioridad sobre `environment.showRestoreButton`.
-     */
     showRestoreButtonOverride = input(undefined, ...(ngDevMode ? [{ debugName: "showRestoreButtonOverride" }] : /* istanbul ignore next */ []));
     action = output();
-    /** Valida y normaliza `routerPath`: agrega `/` inicial y rechaza caracteres inválidos. */
     resolvedRouterLink = computed(() => {
-        this.log('computed resolvedRouterLink');
         const raw = this.routerPath();
         if (!raw)
             return undefined;
@@ -4409,23 +4420,22 @@ class DsxButtonComponent {
         const rawSegments = normalizedRaw.split('/');
         const hasEmptySegments = normalizedRaw.length > 0 && rawSegments.some((s) => s.length === 0);
         if (hasEmptySegments) {
-            console.warn(`[dsx-button] routerPath contiene segmentos vacíos ("//" o "/" al final). ` +
-                `Ruta recibida: "${raw}"`);
+            if (this._isDev && this.debug()) {
+                console.warn(`[dsx-button] routerPath contiene segmentos vacíos: "${raw}"`);
+            }
             return undefined;
         }
         const segments = rawSegments.filter(Boolean);
         const invalid = segments.filter((s) => !VALID_SEGMENT.test(s));
         if (invalid.length > 0) {
-            console.warn(`[dsx-button] routerPath contiene segmentos inválidos: "${invalid.join('", "')}". ` +
-                `Solo se permiten letras, números, guion (-), guion bajo (_), punto (.) y dos puntos (:). ` +
-                `Ruta recibida: "${raw}"`);
+            if (this._isDev && this.debug()) {
+                console.warn(`[dsx-button] routerPath contiene segmentos inválidos: "${invalid.join('", "')}"`);
+            }
             return undefined;
         }
         return `/${segments.join('/')}`;
     }, ...(ngDevMode ? [{ debugName: "resolvedRouterLink" }] : /* istanbul ignore next */ []));
-    /** Prioriza routerPath (validado) sobre routerLink (libre). */
     effectiveRouterLink = computed(() => {
-        this.log('computed effectiveRouterLink');
         const resolvedPath = this.resolvedRouterLink();
         if (resolvedPath) {
             return resolvedPath;
@@ -4438,7 +4448,6 @@ class DsxButtonComponent {
         if (!trimmed) {
             return link;
         }
-        // URLs externas no se normalizan ni validan como rutas internas.
         if (/^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(trimmed)) {
             return link;
         }
@@ -4448,20 +4457,20 @@ class DsxButtonComponent {
         const hasEmptySegments = pathForValidation.length > 0 &&
             rawSegments.some((segment) => segment.length === 0);
         if (hasEmptySegments) {
-            console.warn(`[dsx-button] routerLink contiene segmentos vacíos ("//" o "/" al final). ` +
-                `Ruta recibida: "${link}"`);
+            if (this._isDev && this.debug()) {
+                console.warn(`[dsx-button] routerLink contiene segmentos vacíos: "${link}"`);
+            }
             return link;
         }
         const invalid = rawSegments
             .filter(Boolean)
             .filter((segment) => !VALID_SEGMENT.test(segment));
         if (invalid.length > 0) {
-            console.warn(`[dsx-button] routerLink contiene segmentos inválidos: "${invalid.join('", "')}". ` +
-                `Solo se permiten letras, números, guion (-), guion bajo (_), punto (.) y dos puntos (:). ` +
-                `Ruta recibida: "${link}"`);
+            if (this._isDev && this.debug()) {
+                console.warn(`[dsx-button] routerLink contiene segmentos inválidos: "${invalid.join('", "')}"`);
+            }
             return link;
         }
-        // Si llega una ruta simple sin prefijo, se normaliza a absoluta para evitar navegación relativa inesperada.
         if (link.startsWith('/') ||
             link.startsWith('./') ||
             link.startsWith('../')) {
@@ -4472,23 +4481,6 @@ class DsxButtonComponent {
         }
         return `/${trimmed.split('/').filter(Boolean).join('/')}`;
     }, ...(ngDevMode ? [{ debugName: "effectiveRouterLink" }] : /* istanbul ignore next */ []));
-    // get buttonStyle(): Record<string, string> {
-    //   this.log('getter buttonStyle');
-    //   const color = DSX_PALETTE[this.config.colorToken];
-    //   const width = this.iconOnly() ? this.iconOnlyWidth() : this.width();
-    //   if (this.isCompactIconButton) {
-    //     return {
-    //       width,
-    //       background: 'transparent',
-    //       borderColor: 'transparent',
-    //       color,
-    //     };
-    //   }
-    //   if (this.config.outlined) {
-    //     return { width, background: 'transparent', borderColor: color, color };
-    //   }
-    //   return { width, background: color, borderColor: color, color: '#ffffff' };
-    // }
     buttonStyleComputed = computed(() => {
         const color = DSX_PALETTE[this.config.colorToken];
         const width = this.iconOnly() ? this.iconOnlyWidth() : this.width();
@@ -4518,17 +4510,13 @@ class DsxButtonComponent {
     get buttonLabel() {
         return this.iconOnly() ? undefined : this.label;
     }
-    // Y modifica el getter buttonSize
     get buttonSize() {
-        // Si el usuario especificó un tamaño, úsalo
         if (this.size()) {
             return this.size();
         }
-        // Si es compacto, siempre small
         if (this.isCompactIconButton) {
             return 'small';
         }
-        // Por defecto, small para todos los botones
         return 'small';
     }
     get buttonStyleClass() {
@@ -4541,7 +4529,6 @@ class DsxButtonComponent {
         const cfg = ACTION_CONFIG[this.type()];
         const colorOverride = this.colorOverride();
         const outlinedOverride = this.outlinedOverride();
-        // Ya no se gestiona softDelete/return como modo, cada acción es independiente
         return {
             ...cfg,
             colorToken: colorOverride ?? cfg.colorToken,
@@ -4551,10 +4538,6 @@ class DsxButtonComponent {
     get label() {
         return this.labelOverride() ?? this.config.label;
     }
-    // get tooltip(): string {
-    //   this.log('getter tooltip');
-    //   return this.tooltipOverride() ?? this.config.tooltip;
-    // }
     tooltip = computed(() => {
         return this.tooltipOverride() ?? this.config.tooltip;
     }, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
@@ -4570,18 +4553,6 @@ class DsxButtonComponent {
         }
         return 'primeIcon' in this.config ? this.config.primeIcon : undefined;
     }
-    // showButton(): boolean {
-    //   this.time('showButton');
-    //   const result =
-    //     this.passesGlobalVisibilityPolicy() &&
-    //     this.passesParameterValidation() &&
-    //     this.passesIdValidation();
-    //   this.log('showButton()', {
-    //     result,
-    //   });
-    //   this.timeEnd('showButton');
-    //   return result;
-    // }
     visible = computed(() => {
         return (this.passesGlobalVisibilityPolicy() &&
             this.passesParameterValidation() &&
@@ -4606,45 +4577,44 @@ class DsxButtonComponent {
         return true;
     }
     async onButtonClick() {
-        this.log('click', {
-            id: this.id(),
-            target: this.effectiveRouterLink(),
-        });
+        if (this._isDev && this.debug()) {
+            console.group(`%c🖱️ [dsx-button:${this.type()}] Click`, 'color:#1976d2;font-weight:bold;font-size:13px');
+            console.log('ID:', this.id());
+            console.log('Target:', this.effectiveRouterLink());
+            console.log('Disabled:', this.disabled());
+            console.groupEnd();
+        }
         this.action.emit();
         const target = this.effectiveRouterLink();
         if (target == null) {
-            if (this.type() === 'home') {
-                console.warn('[dsx-button] El botón tipo "home" no tiene routerLink ni routerPath configurado.');
+            if (this.type() === 'home' && this._isDev && this.debug()) {
+                console.warn(`[dsx-button:${this.type()}] No tiene routerLink ni routerPath configurado.`);
             }
             return;
         }
         try {
             const start = performance.now();
             const navigated = await this.navigateToTarget(target);
-            this.log('navigation', {
-                target,
-                navigated,
-                durationMs: Math.round(performance.now() - start),
-            });
+            const duration = Math.round(performance.now() - start);
+            if (this._isDev && this.debug()) {
+                const emoji = navigated ? '✅' : '⚠️';
+                const color = navigated ? '#2e7d32' : '#ed6c02';
+                console.log(`%c${emoji} Navegación ${navigated ? 'exitosa' : 'rechazada'} (${duration}ms)`, `color:${color};font-weight:bold`, target);
+            }
             if (!navigated) {
-                // El router rechazó la navegación, lo más común durante hot-reload
-                // es que un guard de autenticación aún no tiene el estado listo.
-                // Se reintenta una vez tras un tick para darle tiempo al guard.
                 const retried = await new Promise((resolve) => setTimeout(async () => resolve(await this.navigateToTarget(target)), 0));
-                if (!retried) {
-                    console.warn('[dsx-button] Navegación rechazada (posiblemente por un route guard). ' +
-                        'Si ocurre solo tras hot-reload, es normal que el guard rechace ' +
-                        'la primera navegación mientras los servicios de autenticación ' +
-                        'no han terminado de restaurar su estado.', target);
+                if (!retried && this._isDev && this.debug()) {
+                    console.warn(`[dsx-button:${this.type()}] Navegación rechazada por route guard.`, target);
                 }
             }
         }
         catch (error) {
-            console.warn('[dsx-button] Error al navegar desde el botón.', target, error);
+            if (this._isDev && this.debug()) {
+                console.error(`[dsx-button:${this.type()}] Error al navegar:`, target, error);
+            }
         }
     }
     passesIdValidation() {
-        this.log('passesIdValidation');
         const explicitId = this.getNormalizedId();
         const routeId = this.getIdFromNavigationTarget(this.effectiveRouterLink());
         const id = explicitId ?? routeId;
@@ -4653,7 +4623,6 @@ class DsxButtonComponent {
             this.type() === 'softDelete' ||
             this.type() === 'restore' ||
             this.type() === 'return';
-        // Permite exigir que venga [id] cuando el caso de uso lo requiera.
         if (this.requireIdInput() && typeof id !== 'number') {
             return false;
         }
@@ -4713,16 +4682,6 @@ class DsxButtonComponent {
         }
         return undefined;
     }
-    hasExplicitIdInput() {
-        const value = this.id();
-        if (value === null || value === undefined) {
-            return false;
-        }
-        if (typeof value === 'string') {
-            return value.trim() !== '';
-        }
-        return true;
-    }
     navigateToTarget(target) {
         if (Array.isArray(target)) {
             return this._router.navigate(target);
@@ -4734,41 +4693,154 @@ class DsxButtonComponent {
         return this._router.navigateByUrl(target);
     }
     passesParameterValidation() {
-        this.log('passesParameterValidation');
         const parameterName = this.parameterName();
-        // Si no se define un parámetro de seguridad, el botón se muestra sin restricción.
         if (!parameterName) {
             return true;
         }
-        // Mantiene una UX estable durante refresh de parámetros: evita parpadeo
-        // y no evalúa permisos hasta que ParameterValuesService termine de cargar.
         if (!this._paramService.loaded) {
             return false;
         }
-        // Conserva el comportamiento original del servicio:
-        // - retorna false si no cumple el valor esperado
-        // - alerta si el parámetro no existe (ayuda a detectar typos)
         return this._paramService.isParameterValue(parameterName, this.parameterExpectedValue(), this.parameterIndex());
     }
-    log(message, data) {
-        if (!this.debug())
+    // ============ MÉTODOS DE DEBUG ============
+    logFullState() {
+        if (!this._isDev || !this.debug())
             return;
-        console.log(`%c[dsx-button:${this.type()}] ${message}`, 'color:#1976d2;font-weight:bold', data ?? '');
+        const id = this.getNormalizedId();
+        const routeId = this.getIdFromNavigationTarget(this.effectiveRouterLink());
+        const paramName = this.parameterName();
+        const paramLoaded = this._paramService.loaded;
+        const paramValue = paramName && paramLoaded
+            ? this._paramService.getValue(paramName, this.parameterIndex())
+            : undefined;
+        console.group(`%c📊 [dsx-button:${this.type()}] Render #${this.renderCount}`, 'color:#1976d2;font-weight:bold;font-size:14px');
+        // 1. Estado general
+        console.log('🎯 Estado:', {
+            visible: this.visible(),
+            disabled: this.disabled(),
+            type: this.type(),
+            size: this.size(),
+            iconOnly: this.iconOnly(),
+            rounded: this.rounded(),
+            isCompact: this.isCompactIconButton,
+        });
+        // 2. Configuración
+        console.log('⚙️ Configuración:', {
+            label: this.label,
+            icon: this.icon,
+            primeIcon: this.primeIcon,
+            colorToken: this.config.colorToken,
+            outlined: this.config.outlined,
+            tooltip: this.tooltip(),
+        });
+        // 3. Router
+        console.log('🔗 Router:', {
+            routerLink: this.routerLink(),
+            routerPath: this.routerPath(),
+            resolvedRouterLink: this.resolvedRouterLink(),
+            effectiveRouterLink: this.effectiveRouterLink(),
+        });
+        // 4. IDs
+        console.log('🆔 IDs:', {
+            inputId: this.id(),
+            normalizedId: id,
+            routeId: routeId,
+            requireIdInput: this.requireIdInput(),
+            requiresExistingRecord: this.requiresIdGreaterThanZero() ||
+                ['hardDelete', 'softDelete', 'restore', 'return'].includes(this.type()),
+        });
+        // 5. Parámetros
+        if (paramName) {
+            console.log('🔐 Parámetros:', {
+                name: paramName,
+                expected: this.parameterExpectedValue(),
+                index: this.parameterIndex(),
+                loaded: paramLoaded,
+                actual: paramValue,
+                matches: paramLoaded
+                    ? paramValue === this.parameterExpectedValue()
+                    : 'No cargado',
+            });
+        }
+        // 6. Overrides
+        const overrides = {
+            label: this.labelOverride(),
+            tooltip: this.tooltipOverride(),
+            icon: this.iconOverride(),
+            primeIcon: this.primeIconOverride(),
+            color: this.colorOverride(),
+            outlined: this.outlinedOverride(),
+            showValidate: this.showValidateButtonOverride(),
+            showRestore: this.showRestoreButtonOverride(),
+        };
+        const activeOverrides = Object.entries(overrides)
+            .filter(([_, value]) => value !== undefined)
+            .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+        if (Object.keys(activeOverrides).length > 0) {
+            console.log('🔄 Overrides activos:', activeOverrides);
+        }
+        // 7. Validaciones
+        console.log('✅ Validaciones:', {
+            globalVisibility: this.passesGlobalVisibilityPolicy(),
+            parameterValidation: this.passesParameterValidation(),
+            idValidation: this.passesIdValidation(),
+            visible: this.visible(),
+        });
+        // 8. Estilos
+        console.log('🎨 Estilos:', {
+            width: this.iconOnly() ? this.iconOnlyWidth() : this.width(),
+            style: this.buttonStyleComputed(),
+            styleClass: this.buttonStyleClass,
+            size: this.buttonSize,
+        });
+        console.groupEnd();
     }
-    warn(message, data) {
-        if (!this.debug())
+    logValidationIssues(validations) {
+        if (!this._isDev || !this.debug())
             return;
-        console.warn(`[dsx-button:${this.type()}] ${message}`, data ?? '');
+        if (!validations.visible) {
+            console.group(`%c❌ [dsx-button:${this.type()}] NO VISIBLE`, 'color:#d32f2f;font-weight:bold;font-size:13px');
+            console.log('Validaciones fallidas:', {
+                globalVisibility: validations.global,
+                parameterValidation: validations.parameter,
+                idValidation: validations.id,
+            });
+            if (!validations.id) {
+                const id = this.getNormalizedId();
+                const routeId = this.getIdFromNavigationTarget(this.effectiveRouterLink());
+                console.warn('⚠️ Problema con ID:', {
+                    explicitId: this.id(),
+                    normalizedId: id,
+                    routeId: routeId,
+                    requireIdInput: this.requireIdInput(),
+                    requiresExistingRecord: this.requiresIdGreaterThanZero() ||
+                        ['hardDelete', 'softDelete', 'restore', 'return'].includes(this.type()),
+                });
+            }
+            if (!validations.parameter && this.parameterName()) {
+                console.warn('⚠️ Problema con parámetro:', {
+                    name: this.parameterName(),
+                    expected: this.parameterExpectedValue(),
+                    index: this.parameterIndex(),
+                    loaded: this._paramService.loaded,
+                    actualValue: this._paramService.loaded
+                        ? this._paramService.getValue(this.parameterName(), this.parameterIndex())
+                        : 'No cargado',
+                });
+            }
+            console.groupEnd();
+        }
     }
-    time(label) {
-        if (!this.debug())
+    // Métodos de log existentes mejorados
+    log(message, data) {
+        if (!this._isDev || !this.debug())
             return;
-        console.time(`[dsx-button:${this.type()}] ${label}`);
+        console.log(`%c[dsx-button:${this.type()}] ${message}`, 'color:#1976d2;font-weight:bold', data ?? '');
     }
-    timeEnd(label) {
-        if (!this.debug())
+    warn(message, data) {
+        if (!this._isDev || !this.debug())
             return;
-        console.timeEnd(`[dsx-button:${this.type()}] ${label}`);
+        console.warn(`[dsx-button:${this.type()}] ${message}`, data ?? '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxButtonComponent, isStandalone: true, selector: "dsx-button", inputs: { debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerPath: { classPropertyName: "routerPath", publicName: "routerPath", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyWidth: { classPropertyName: "iconOnlyWidth", publicName: "iconOnlyWidth", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, parameterName: { classPropertyName: "parameterName", publicName: "parameterName", isSignal: true, isRequired: false, transformFunction: null }, parameterExpectedValue: { classPropertyName: "parameterExpectedValue", publicName: "parameterExpectedValue", isSignal: true, isRequired: false, transformFunction: null }, parameterIndex: { classPropertyName: "parameterIndex", publicName: "parameterIndex", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, requireIdInput: { classPropertyName: "requireIdInput", publicName: "requireIdInput", isSignal: true, isRequired: false, transformFunction: null }, requiresIdGreaterThanZero: { classPropertyName: "requiresIdGreaterThanZero", publicName: "requiresIdGreaterThanZero", isSignal: true, isRequired: false, transformFunction: null }, labelOverride: { classPropertyName: "labelOverride", publicName: "labelOverride", isSignal: true, isRequired: false, transformFunction: null }, tooltipOverride: { classPropertyName: "tooltipOverride", publicName: "tooltipOverride", isSignal: true, isRequired: false, transformFunction: null }, iconOverride: { classPropertyName: "iconOverride", publicName: "iconOverride", isSignal: true, isRequired: false, transformFunction: null }, primeIconOverride: { classPropertyName: "primeIconOverride", publicName: "primeIconOverride", isSignal: true, isRequired: false, transformFunction: null }, colorOverride: { classPropertyName: "colorOverride", publicName: "colorOverride", isSignal: true, isRequired: false, transformFunction: null }, outlinedOverride: { classPropertyName: "outlinedOverride", publicName: "outlinedOverride", isSignal: true, isRequired: false, transformFunction: null }, showValidateButtonOverride: { classPropertyName: "showValidateButtonOverride", publicName: "showValidateButtonOverride", isSignal: true, isRequired: false, transformFunction: null }, showRestoreButtonOverride: { classPropertyName: "showRestoreButtonOverride", publicName: "showRestoreButtonOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { properties: { "class.dsx-button-compact-host": "this.compactHostClass" } }, ngImport: i0, template: "<!--Bot\u00F3n con las configuraciones din\u00E1micas para CRUD -->\r\n@if (visible()) {\r\n<p-button\r\n  [label]=\"buttonLabel\"\r\n  [style]=\"buttonStyleComputed()\"\r\n  [styleClass]=\"buttonStyleClass\"\r\n  [pTooltip]=\"tooltip()\"\r\n  [tooltipDisabled]=\"disabled()\"\r\n  tooltipPosition=\"top\"\r\n  [rounded]=\"rounded()\"\r\n  [text]=\"isCompactIconButton\"\r\n  [size]=\"buttonSize\"\r\n  severity=\"secondary\"\r\n  [disabled]=\"disabled()\"\r\n  [icon]=\"iconOnly() ? primeIcon : undefined\"\r\n  (click)=\"onButtonClick()\"\r\n>\r\n  @if (!iconOnly()) {\r\n  <span class=\"material-symbols-outlined dsx-button-icon-small\"\r\n    >{{ materialIcon }}</span\r\n  >\r\n  }\r\n</p-button>\r\n}\r\n", styles: [".dsx-button-icon-small{font-size:1.25rem;vertical-align:middle}:host{display:inline-flex;margin-bottom:.25rem}:host.dsx-button-compact-host{margin-bottom:0}:host ::ng-deep .p-button.dsx-button-compact{min-height:2rem;padding-block:.2rem}:host ::ng-deep .p-button .material-symbols-outlined.p-button-icon{line-height:1;vertical-align:middle}:host ::ng-deep .p-button.dsx-button-compact .p-button-icon{margin:0;font-size:1.2rem;line-height:1}:host ::ng-deep .p-button.dsx-button-compact .material-symbols-outlined.p-button-icon{font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 0,\"opsz\" 24}:host ::ng-deep .p-button:disabled,:host ::ng-deep .p-button.p-disabled{cursor:not-allowed!important;opacity:.45!important;filter:grayscale(.2) saturate(.75)}:host ::ng-deep .p-button:disabled *,:host ::ng-deep .p-button.p-disabled *{cursor:not-allowed!important}.p-button.dsx-button-outlined-neutral,.p-button.dsx-button-outlined-info{background:#f5f7fa!important;border:1.5px solid #0066cc!important;color:#06c!important}.p-button.dsx-button-outlined-neutral:disabled,.p-button.dsx-button-outlined-info:disabled{background:#f5f7fa!important;border:1.5px solid #b0bec5!important;color:#b0bec5!important}\n"], dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.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"] }] });
@@ -4873,7 +4945,7 @@ const ACTION_CONFIG = {
     view: {
         label: 'Visualizar',
         icon: 'visibility',
-        primeIcon: 'pi pi-eye',
+        primeIcon: 'fa-solid fa-eye',
         colorToken: 'view',
         tooltip: 'Vista previa',
     },
@@ -4900,167 +4972,11 @@ const ACTION_CONFIG = {
     },
 };
 
-class DsxAutocomplete {
-    // Inputs usando Señales
-    datasource = input.required(...(ngDevMode ? [{ debugName: "datasource" }] : /* istanbul ignore next */ []));
-    optionLabel = input.required(...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
-    label = input('Seleccionar', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    delay = input(100, ...(ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []));
-    idKey = input.required(...(ngDevMode ? [{ debugName: "idKey" }] : /* istanbul ignore next */ []));
-    dataKey = input('', ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
-    permitirCrear = input(false, ...(ngDevMode ? [{ debugName: "permitirCrear" }] : /* istanbul ignore next */ []));
-    debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
-    factoryNuevoRegistro = input(...(ngDevMode ? [undefined, { debugName: "factoryNuevoRegistro" }] : /* istanbul ignore next */ []));
-    // Estado Interno
-    dataFiltrada = signal([], ...(ngDevMode ? [{ debugName: "dataFiltrada" }] : /* istanbul ignore next */ []));
-    value = [];
-    onChange = () => { };
-    onTouched = () => { };
-    disabled = false;
-    lastLogTime = 0;
-    timeoutLimpieza = null;
-    logDebug(message, data) {
-        if (!this.debug())
-            return;
-        const now = Date.now();
-        if (now - this.lastLogTime < 50)
-            return;
-        this.lastLogTime = now;
-        console.log(`[DsxAutocomplete] ${message}`, data || '');
-    }
-    searchRequisitos(event) {
-        const inicio = performance.now();
-        const label = this.optionLabel();
-        // FLUJO A: Dropdown (sin texto)
-        if (!event.query || event.query.trim() === '') {
-            const todoElUniverso = this.datasource();
-            this.dataFiltrada.set(todoElUniverso);
-            this.logDebug('Modo dropdown activo', {
-                registros: todoElUniverso.length,
-            });
-            return;
-        }
-        // FLUJO B: Búsqueda
-        const palabrasBuscadas = event.query
-            .toLowerCase()
-            .trim()
-            .split(/\s+/)
-            .filter((palabra) => palabra.length > 0);
-        const filtrados = this.datasource()
-            .filter((item) => {
-            const textoRegistro = String(item[label] || '').toLowerCase();
-            return palabrasBuscadas.every((palabra) => textoRegistro.includes(palabra));
-        })
-            .slice(0, 10);
-        this.dataFiltrada.set(filtrados);
-        this.logDebug(`Búsqueda "${event.query}" (${(performance.now() - inicio).toFixed(2)}ms)`, { encontrados: filtrados.length });
-    }
-    evaluarYAgregar(event) {
-        const valorInput = event.target.value?.trim();
-        if (!valorInput) {
-            this.dataFiltrada.set([]);
-            return;
-        }
-        const sugerencias = this.dataFiltrada();
-        const actuales = this.value || [];
-        const campoId = this.idKey();
-        if (sugerencias.length > 0) {
-            const primeraMatch = sugerencias[0];
-            const yaExiste = actuales.some((item) => item[campoId] === primeraMatch[campoId]);
-            if (!yaExiste) {
-                this.actualizarFormulario([...actuales, primeraMatch]);
-                this.logDebug('✅ Elemento agregado');
-            }
-        }
-        else if (this.permitirCrear()) {
-            let nuevo;
-            if (this.factoryNuevoRegistro()) {
-                nuevo = this.factoryNuevoRegistro()(valorInput);
-            }
-            else {
-                nuevo = {
-                    [campoId]: 0,
-                    [this.optionLabel()]: valorInput.toUpperCase(),
-                    activo: true,
-                };
-            }
-            this.actualizarFormulario([...actuales, nuevo]);
-            this.logDebug('🆕 Nuevo elemento creado', valorInput);
-        }
-        event.target.value = '';
-        this.dataFiltrada.set([]);
-    }
-    onHide() {
-        this.logDebug('Dropdown ocultado - Limpiando estado');
-        // Limpiar timeout anterior si existe
-        if (this.timeoutLimpieza) {
-            clearTimeout(this.timeoutLimpieza);
-            this.timeoutLimpieza = null;
-        }
-        // Limpiar después de un pequeño delay
-        this.timeoutLimpieza = setTimeout(() => {
-            this.dataFiltrada.set([]);
-            this.timeoutLimpieza = null;
-        }, 100);
-    }
-    onShow() {
-        this.logDebug('Dropdown mostrado');
-        // Limpiar timeout pendiente
-        if (this.timeoutLimpieza) {
-            clearTimeout(this.timeoutLimpieza);
-            this.timeoutLimpieza = null;
-        }
-    }
-    actualizarFormulario(nuevaLista) {
-        this.value = nuevaLista;
-        this.onChange(this.value);
-        this.logDebug('Formulario actualizado', {
-            total: nuevaLista.length,
-        });
-    }
-    // --- ControlValueAccessor ---
-    writeValue(value) {
-        this.value = value || [];
-        this.dataFiltrada.set([]);
-        if (this.timeoutLimpieza) {
-            clearTimeout(this.timeoutLimpieza);
-            this.timeoutLimpieza = null;
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: DsxAutocomplete, isStandalone: true, selector: "dsx-autocomplete", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, permitirCrear: { classPropertyName: "permitirCrear", publicName: "permitirCrear", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, factoryNuevoRegistro: { classPropertyName: "factoryNuevoRegistro", publicName: "factoryNuevoRegistro", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DsxAutocomplete),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    multiple\r\n    [dropdown]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onChange(value)\"\r\n    (onBlur)=\"onTouched()\"\r\n    (onShow)=\"onShow()\"\r\n    (onHide)=\"onHide()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n    placeholder=\"Ingresa un texto....\"\r\n  >\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n", styles: [""], dependencies: [{ kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxAutocomplete, decorators: [{
-            type: Component,
-            args: [{ selector: 'dsx-autocomplete', imports: [AutoComplete, FormsModule, FloatLabel], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DsxAutocomplete),
-                            multi: true,
-                        },
-                    ], template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    multiple\r\n    [dropdown]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onChange(value)\"\r\n    (onBlur)=\"onTouched()\"\r\n    (onShow)=\"onShow()\"\r\n    (onHide)=\"onHide()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n    placeholder=\"Ingresa un texto....\"\r\n  >\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n" }]
-        }], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: true }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], permitirCrear: [{ type: i0.Input, args: [{ isSignal: true, alias: "permitirCrear", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], factoryNuevoRegistro: [{ type: i0.Input, args: [{ isSignal: true, alias: "factoryNuevoRegistro", required: false }] }] } });
-
-class FileComponent {
-    // Inputs
-    existingFile = input(null, ...(ngDevMode ? [{ debugName: "existingFile" }] : /* istanbul ignore next */ []));
-    existingFileName = input(null, ...(ngDevMode ? [{ debugName: "existingFileName" }] : /* istanbul ignore next */ []));
-    overrideFileName = input(null, ...(ngDevMode ? [{ debugName: "overrideFileName" }] : /* istanbul ignore next */ []));
+class FileComponent {
+    // Inputs
+    existingFile = input(null, ...(ngDevMode ? [{ debugName: "existingFile" }] : /* istanbul ignore next */ []));
+    existingFileName = input(null, ...(ngDevMode ? [{ debugName: "existingFileName" }] : /* istanbul ignore next */ []));
+    overrideFileName = input(null, ...(ngDevMode ? [{ debugName: "overrideFileName" }] : /* istanbul ignore next */ []));
     debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
     required = input(true, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     accept = input('.xls,.xlsx', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
@@ -8597,7 +8513,7 @@ class DsxdateShort {
                 useExisting: forwardRef(() => DsxdateShort),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
+        ], ngImport: i0, template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateShort, decorators: [{
             type: Component,
@@ -8614,7 +8530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => DsxdateShort),
                             multi: true,
                         },
-                    ], template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n" }]
+                    ], template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnFocus", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
 
 // dsx-input-currency.ts
@@ -8852,6 +8768,666 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 args: [InputNumber]
             }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], currency: [{ type: i0.Input, args: [{ isSignal: true, alias: "currency", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], minFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minFractionDigits", required: false }] }], maxFractionDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFractionDigits", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], selectAllOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllOnFocus", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
 
+class DsxAutocomplete {
+    injector = inject(Injector);
+    cdr = inject(ChangeDetectorRef);
+    ngControl = null;
+    isDevModeInternal = isDevMode();
+    controlSignal = signal(null, ...(ngDevMode ? [{ debugName: "controlSignal" }] : /* istanbul ignore next */ []));
+    // ✅ Almacenar IDs pendientes (privado)
+    pendingIdsInternal = [];
+    pendingValue = null;
+    pendingLogs = [];
+    datasource = input.required(...(ngDevMode ? [{ debugName: "datasource" }] : /* istanbul ignore next */ []));
+    optionLabel = input.required(...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    label = input('Seleccionar', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    delay = input(100, ...(ngDevMode ? [{ debugName: "delay" }] : /* istanbul ignore next */ []));
+    idKey = input.required(...(ngDevMode ? [{ debugName: "idKey" }] : /* istanbul ignore next */ []));
+    dataKey = input('', ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
+    permitirCrear = input(false, ...(ngDevMode ? [{ debugName: "permitirCrear" }] : /* istanbul ignore next */ []));
+    isMultiple = input(true, ...(ngDevMode ? [{ debugName: "isMultiple" }] : /* istanbul ignore next */ []));
+    debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
+    factoryNuevoRegistro = input(...(ngDevMode ? [undefined, { debugName: "factoryNuevoRegistro" }] : /* istanbul ignore next */ []));
+    returnID = input(false, ...(ngDevMode ? [{ debugName: "returnID" }] : /* istanbul ignore next */ []));
+    showError = input(true, ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    errorControl = computed(() => {
+        const control = this.controlSignal();
+        if (!this.showError())
+            return null;
+        return control?.control ?? null;
+    }, ...(ngDevMode ? [{ debugName: "errorControl" }] : /* istanbul ignore next */ []));
+    get isDevMode() {
+        return this.isDevModeInternal;
+    }
+    // ✅ Getter público para IDs pendientes (solo para debug)
+    get pendingIds() {
+        return this.pendingIdsInternal;
+    }
+    // ✅ Getter para logs de pendientes
+    get pendingLogsInfo() {
+        return this.pendingLogs.join(' | ');
+    }
+    get formValue() {
+        return this.ngControl?.control?.value;
+    }
+    get controlName() {
+        return this.ngControl?.name || null;
+    }
+    get controlValid() {
+        return this.ngControl?.control?.valid ?? true;
+    }
+    get controlTouched() {
+        return this.ngControl?.control?.touched ?? false;
+    }
+    get controlDirty() {
+        return this.ngControl?.control?.dirty ?? false;
+    }
+    get controlErrors() {
+        return this.ngControl?.control?.errors ?? null;
+    }
+    get controlValue() {
+        return this.ngControl?.control?.value;
+    }
+    get controlStatus() {
+        if (!this.ngControl?.control)
+            return 'sin control';
+        const control = this.ngControl.control;
+        return `valid: ${control.valid}, touched: ${control.touched}, dirty: ${control.dirty}, errors: ${JSON.stringify(control.errors)}`;
+    }
+    dataFiltrada = signal([], ...(ngDevMode ? [{ debugName: "dataFiltrada" }] : /* istanbul ignore next */ []));
+    value = this.isMultiple() ? [] : null;
+    onChange = () => { };
+    onTouched = () => { };
+    disabled = false;
+    lastLogTime = 0;
+    timeoutLimpieza = null;
+    initialValueSet = false;
+    constructor() {
+        effect(() => {
+            this.ngControl = this.injector.get(NgControl, null);
+            this.controlSignal.set(this.ngControl);
+            if (this.shouldDebug() && this.ngControl) {
+                this.logDebug('Inferred from formControlName:', {
+                    controlName: this.getFormControlName(),
+                    optionLabel: this.optionLabel(),
+                    label: this.label(),
+                    showError: this.showError(),
+                    returnID: this.returnID(),
+                    isMultiple: this.isMultiple(),
+                });
+            }
+        });
+        // ✅ Effect mejorado para recargar cuando cambia el datasource
+        effect(() => {
+            const ds = this.datasource();
+            if (ds.length > 0) {
+                this.logDebug('📚 Datasource actualizado:', ds.length);
+                // ✅ Si hay IDs pendientes, intentar cargarlos
+                if (this.pendingIdsInternal.length > 0) {
+                    this.logDebug('🔄 Procesando IDs pendientes:', this.pendingIdsInternal);
+                    this.procesarIdsPendientes(this.pendingIdsInternal);
+                    // ✅ No limpiamos inmediatamente para poder ver el estado en debug
+                }
+                // ✅ Si ya se inicializó y hay valor en el formulario, recargar
+                if (this.initialValueSet && this.ngControl?.control?.value) {
+                    this.logDebug('🔄 Recargando valor con nuevo datasource');
+                    this.writeValue(this.ngControl.control.value);
+                }
+            }
+        });
+        effect(() => {
+            const control = this.ngControl?.control;
+            if (control && this.shouldDebug()) {
+                const subscription = control.statusChanges?.subscribe(() => {
+                    this.logDebug('📊 Estado del control cambiado:', {
+                        controlName: this.getFormControlName(),
+                        valid: control.valid,
+                        touched: control.touched,
+                        dirty: control.dirty,
+                        errors: control.errors,
+                        value: control.value,
+                    });
+                });
+                return () => {
+                    if (subscription) {
+                        subscription.unsubscribe();
+                    }
+                };
+            }
+            return () => { };
+        });
+    }
+    ngOnInit() {
+        this.logDebug('🚀 Componente inicializado');
+        this.value = this.isMultiple() ? [] : null;
+    }
+    ngAfterViewInit() {
+        this.cdr.detectChanges();
+    }
+    shouldDebug() {
+        return this.isDevModeInternal && this.debug();
+    }
+    logDebug(message, data) {
+        if (!this.shouldDebug())
+            return;
+        const now = Date.now();
+        if (now - this.lastLogTime < 50)
+            return;
+        this.lastLogTime = now;
+        console.log(`[DsxAutocomplete] ${message}`, data || '');
+    }
+    // ✅ Método para registrar eventos de pendientes
+    logPending(message, ids) {
+        if (!this.shouldDebug())
+            return;
+        const timestamp = new Date().toISOString().substring(11, 19);
+        const logEntry = `[${timestamp}] ${message} ${ids ? `IDs: [${ids.join(', ')}]` : ''}`;
+        this.pendingLogs.push(logEntry);
+        // Mantener solo los últimos 10 logs
+        if (this.pendingLogs.length > 10) {
+            this.pendingLogs.shift();
+        }
+        console.log(`[DsxAutocomplete] ⏳ PENDING: ${logEntry}`, {
+            pendingIds: this.pendingIdsInternal,
+            totalPending: this.pendingIdsInternal.length,
+        });
+    }
+    // ✅ Nuevo método: Procesar IDs pendientes con logs mejorados
+    procesarIdsPendientes(ids) {
+        if (ids.length === 0) {
+            this.logDebug('✅ No hay IDs pendientes para procesar');
+            return;
+        }
+        const sourceData = this.datasource();
+        if (sourceData.length === 0) {
+            this.logPending('⚠️ Datasource vacío, no se pueden procesar IDs pendientes', ids);
+            return;
+        }
+        this.logPending(`🔍 Procesando ${ids.length} IDs pendientes`, ids);
+        const objetos = sourceData.filter((item) => ids.includes(Number(item[this.idKey()])));
+        const objetosOrdenados = ids
+            .map((id) => objetos.find((item) => Number(item[this.idKey()]) === id))
+            .filter((item) => item !== undefined);
+        const encontrados = objetosOrdenados.length;
+        const noEncontrados = ids.length - encontrados;
+        this.logPending(`✅ Procesados: ${encontrados} encontrados, ${noEncontrados} no encontrados`, ids);
+        if (noEncontrados > 0) {
+            const idsNoEncontrados = ids.filter((id) => !objetos.some((item) => Number(item[this.idKey()]) === id));
+            this.logPending(`⚠️ IDs no encontrados en datasource:`, idsNoEncontrados);
+        }
+        // Si se encontraron todos los objetos, actualizar la vista
+        if (encontrados > 0) {
+            if (this.isMultiple()) {
+                this.value = objetosOrdenados;
+            }
+            else {
+                this.value = objetosOrdenados.length > 0 ? objetosOrdenados[0] : null;
+            }
+            this.cdr.detectChanges();
+            // ✅ Limpiar pendientes solo si se encontraron todos
+            if (noEncontrados === 0) {
+                this.pendingIdsInternal = [];
+                this.logPending('✅ Todos los IDs pendientes fueron resueltos', ids);
+            }
+            else {
+                // Mantener solo los no encontrados
+                const idsNoEncontrados = ids.filter((id) => !objetos.some((item) => Number(item[this.idKey()]) === id));
+                this.pendingIdsInternal = idsNoEncontrados;
+                this.logPending(`⏳ ${idsNoEncontrados.length} IDs pendientes aún no resueltos`, idsNoEncontrados);
+            }
+        }
+        else {
+            this.logPending('❌ Ningún ID pendiente pudo ser resuelto', ids);
+        }
+    }
+    searchRequisitos(event) {
+        const inicio = performance.now();
+        const label = this.optionLabel();
+        if (!event.query || event.query.trim() === '') {
+            const todoElUniverso = this.datasource();
+            this.dataFiltrada.set(todoElUniverso);
+            this.logDebug('Modo dropdown activo', {
+                registros: todoElUniverso.length,
+            });
+            return;
+        }
+        const queryNormalizado = this.normalizarTexto(event.query.trim());
+        if (!queryNormalizado) {
+            this.dataFiltrada.set(this.datasource());
+            return;
+        }
+        const palabrasBuscadas = queryNormalizado
+            .toLowerCase()
+            .split(/\s+/)
+            .filter((palabra) => palabra.length > 0);
+        const filtrados = this.datasource()
+            .filter((item) => {
+            const textoRegistro = this.normalizarTexto(String(item[label] || '')).toLowerCase();
+            return palabrasBuscadas.every((palabra) => textoRegistro.includes(palabra));
+        })
+            .slice(0, 10);
+        this.dataFiltrada.set(filtrados);
+        this.logDebug(`Búsqueda "${event.query}" (${(performance.now() - inicio).toFixed(2)}ms)`, { encontrados: filtrados.length });
+    }
+    normalizarTexto(texto) {
+        if (!texto)
+            return '';
+        return texto
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .replace(/\s+/g, ' ')
+            .trim();
+    }
+    evaluarYAgregar(event) {
+        const valorInput = event.target.value?.trim();
+        if (!valorInput) {
+            this.dataFiltrada.set([]);
+            if (this.obtenerArrayValue().length === 0) {
+                this.actualizarFormulario([]);
+            }
+            return;
+        }
+        const sugerencias = this.dataFiltrada();
+        const actuales = this.obtenerArrayValue();
+        const campoId = this.idKey();
+        if (sugerencias.length > 0) {
+            const valorNormalizado = this.normalizarTexto(valorInput).toLowerCase();
+            const primeraMatch = sugerencias.find((item) => {
+                const itemLabel = this.normalizarTexto(String(item[this.optionLabel()] || '')).toLowerCase();
+                return itemLabel === valorNormalizado;
+            }) || sugerencias[0];
+            if (!this.isMultiple()) {
+                this.actualizarFormulario([primeraMatch]);
+                this.logDebug('✅ Elemento reemplazado (modo single)', primeraMatch[this.optionLabel()]);
+                event.target.value = '';
+                this.dataFiltrada.set([]);
+                return;
+            }
+            const yaExiste = actuales.some((item) => item[campoId] === primeraMatch[campoId]);
+            if (!yaExiste) {
+                this.actualizarFormulario([...actuales, primeraMatch]);
+                this.logDebug('✅ Elemento agregado');
+            }
+            else {
+                this.logDebug('⚠️ Elemento ya existe en la selección');
+                event.target.value = '';
+                this.dataFiltrada.set([]);
+                return;
+            }
+        }
+        else if (this.permitirCrear()) {
+            const valorNormalizado = this.normalizarTexto(valorInput).toLowerCase();
+            const yaExisteEnActuales = actuales.some((item) => {
+                const itemLabel = this.normalizarTexto(String(item[this.optionLabel()] || '')).toLowerCase();
+                return itemLabel === valorNormalizado;
+            });
+            if (yaExisteEnActuales) {
+                this.logDebug('⚠️ Elemento ya existe en la selección');
+                event.target.value = '';
+                this.dataFiltrada.set([]);
+                return;
+            }
+            let nuevo;
+            if (this.factoryNuevoRegistro()) {
+                nuevo = this.factoryNuevoRegistro()(valorInput);
+            }
+            else {
+                nuevo = {
+                    [campoId]: 0,
+                    [this.optionLabel()]: valorInput.toUpperCase(),
+                    activo: true,
+                };
+            }
+            this.actualizarFormulario(this.isMultiple() ? [...actuales, nuevo] : [nuevo]);
+            this.logDebug('🆕 Nuevo elemento creado', valorInput);
+        }
+        else {
+            this.logDebug('⚠️ No se encontraron coincidencias y no se permite crear', valorInput);
+            this.actualizarFormulario([]);
+            if (this.ngControl?.control) {
+                this.ngControl.control.markAsTouched();
+                this.onTouched();
+            }
+        }
+        event.target.value = '';
+        this.dataFiltrada.set([]);
+    }
+    clearSelection() {
+        this.actualizarFormulario([]);
+        this.logDebug('🧹 Selección limpiada');
+    }
+    onNgModelChange(selectedItems) {
+        let items = [];
+        if (selectedItems === null || selectedItems === undefined) {
+            items = [];
+        }
+        else if (Array.isArray(selectedItems)) {
+            items = selectedItems;
+        }
+        else {
+            items = [selectedItems];
+        }
+        this.logDebug('📝 onNgModelChange:', {
+            items: items.length,
+            isMultiple: this.isMultiple(),
+            isArray: Array.isArray(selectedItems),
+            isNull: selectedItems === null,
+            returnID: this.returnID(),
+        });
+        if (this.isMultiple()) {
+            this.value = items;
+        }
+        else {
+            this.value = items.length > 0 ? items[0] : null;
+        }
+        const outputValue = this.getOutputValue(items);
+        this.onChange(outputValue);
+        this.logDebug('📊 Estado del control después de onChange:', {
+            controlName: this.getFormControlName(),
+            status: this.controlStatus,
+            value: outputValue,
+        });
+        if (items.length === 0 && this.ngControl?.control) {
+            this.ngControl.control.markAsTouched();
+            this.onTouched();
+            this.logDebug('📝 Control marcado como touched (selección vacía)', {
+                newStatus: this.controlStatus,
+            });
+        }
+        this.logDebug('📝 Selección actualizada', {
+            returnID: this.returnID(),
+            items: items.length,
+            output: outputValue,
+        });
+    }
+    getOutputValue(items) {
+        if (items.length === 0) {
+            return this.isMultiple() ? [] : null;
+        }
+        if (this.returnID()) {
+            const ids = items.map((item) => Number(item[this.idKey()]));
+            return this.isMultiple() ? ids : ids[0];
+        }
+        return this.isMultiple() ? items : items[0];
+    }
+    obtenerArrayValue() {
+        if (this.isMultiple()) {
+            return Array.isArray(this.value) ? this.value : [];
+        }
+        return this.value ? [this.value] : [];
+    }
+    getValueLength() {
+        if (this.isMultiple()) {
+            return Array.isArray(this.value) ? this.value.length : 0;
+        }
+        return this.value ? 1 : 0;
+    }
+    getValueDisplay(type) {
+        if (!this.value || (Array.isArray(this.value) && this.value.length === 0)) {
+            return 'Ninguno';
+        }
+        const items = Array.isArray(this.value) ? this.value : [this.value];
+        if (type === 'id') {
+            return items.map((item) => item[this.idKey()]).join(', ') || 'Ninguno';
+        }
+        else {
+            return (items.map((item) => item[this.optionLabel()]).join(', ') || 'Ninguno');
+        }
+    }
+    onHide() {
+        this.logDebug('Dropdown ocultado - Limpiando estado');
+        if (this.timeoutLimpieza) {
+            clearTimeout(this.timeoutLimpieza);
+            this.timeoutLimpieza = null;
+        }
+        this.timeoutLimpieza = setTimeout(() => {
+            this.dataFiltrada.set([]);
+            this.timeoutLimpieza = null;
+        }, 100);
+        if (this.ngControl?.control) {
+            const estabaTouched = this.ngControl.control.touched;
+            if (!estabaTouched) {
+                this.ngControl.control.markAsTouched();
+                this.onTouched();
+                this.logDebug('Control marked as touched (onHide)', {
+                    controlName: this.getFormControlName(),
+                    newStatus: this.controlStatus,
+                });
+            }
+            else {
+                this.logDebug('Control ya estaba touched (onHide)', {
+                    controlName: this.getFormControlName(),
+                    status: this.controlStatus,
+                });
+            }
+        }
+    }
+    onShow() {
+        this.logDebug('Dropdown mostrado');
+        if (this.timeoutLimpieza) {
+            clearTimeout(this.timeoutLimpieza);
+            this.timeoutLimpieza = null;
+        }
+    }
+    actualizarFormulario(nuevaLista) {
+        if (nuevaLista.length === 0) {
+            if (this.isMultiple()) {
+                this.value = [];
+            }
+            else {
+                this.value = null;
+            }
+            const outputValue = this.isMultiple() ? [] : null;
+            this.onChange(outputValue);
+            this.logDebug('Formulario actualizado (vacío)', {
+                isMultiple: this.isMultiple(),
+                output: outputValue,
+            });
+            return;
+        }
+        if (this.isMultiple()) {
+            this.value = nuevaLista;
+        }
+        else {
+            this.value = nuevaLista.length > 0 ? nuevaLista[0] : null;
+        }
+        const outputValue = this.getOutputValue(nuevaLista);
+        this.onChange(outputValue);
+        this.logDebug('Formulario actualizado', {
+            total: nuevaLista.length,
+            isMultiple: this.isMultiple(),
+            returnID: this.returnID(),
+            output: outputValue,
+        });
+    }
+    getFormControlName() {
+        return this.ngControl?.name || null;
+    }
+    // ✨ MEJORADO: writeValue con manejo de IDs pendientes y logs
+    writeValue(value) {
+        const timestamp = new Date().toISOString();
+        this.logDebug(`🔄 writeValue INVOCADO ${timestamp}`, {
+            value,
+            type: value === null
+                ? 'null'
+                : value === undefined
+                    ? 'undefined'
+                    : Array.isArray(value)
+                        ? 'array'
+                        : typeof value === 'object'
+                            ? 'object'
+                            : typeof value,
+            returnID: this.returnID(),
+            isMultiple: this.isMultiple(),
+            hasDatasource: this.datasource().length > 0,
+            datasourceSize: this.datasource().length,
+            pendingIdsActuales: this.pendingIdsInternal,
+        });
+        if (value === null || value === undefined) {
+            this.logDebug(`⚠️ Valor null/undefined, limpiando selección`);
+            this.value = this.isMultiple() ? [] : null;
+            if (this.pendingIdsInternal.length > 0) {
+                this.logPending('🧹 Limpiando IDs pendientes por null/undefined', this.pendingIdsInternal);
+                this.pendingIdsInternal = [];
+            }
+            this.pendingValue = null;
+            this.initialValueSet = true;
+            this.cdr.markForCheck();
+            this.cdr.detectChanges();
+            return;
+        }
+        let items = [];
+        let ids = [];
+        if (Array.isArray(value)) {
+            if (value.length === 0) {
+                this.value = this.isMultiple() ? [] : null;
+                if (this.pendingIdsInternal.length > 0) {
+                    this.logPending('🧹 Limpiando IDs pendientes por array vacío', this.pendingIdsInternal);
+                    this.pendingIdsInternal = [];
+                }
+                this.pendingValue = null;
+                this.initialValueSet = true;
+                this.cdr.markForCheck();
+                this.cdr.detectChanges();
+                return;
+            }
+            if (typeof value[0] === 'number') {
+                ids = value;
+                this.logDebug(`📊 Recibidos ${ids.length} IDs:`, ids);
+            }
+            else if (typeof value[0] === 'object' && value[0] !== null) {
+                items = value;
+                this.logDebug(`📊 Recibidos ${items.length} objetos:`, items.map((i) => i[this.optionLabel()]));
+            }
+        }
+        else if (typeof value === 'number') {
+            ids = [value];
+            this.logDebug(`📊 Recibido 1 ID:`, [value]);
+        }
+        else if (typeof value === 'object' && value !== null) {
+            items = [value];
+            this.logDebug(`📊 Recibido 1 objeto:`, value[this.optionLabel()]);
+        }
+        else {
+            this.value = this.isMultiple() ? [] : null;
+            if (this.pendingIdsInternal.length > 0) {
+                this.logPending('🧹 Limpiando IDs pendientes por tipo no soportado', this.pendingIdsInternal);
+                this.pendingIdsInternal = [];
+            }
+            this.pendingValue = null;
+            this.initialValueSet = true;
+            this.cdr.markForCheck();
+            this.cdr.detectChanges();
+            return;
+        }
+        const sourceData = this.datasource();
+        // ✅ Si tenemos IDs y el datasource está vacío, guardarlos para después
+        if (ids.length > 0 && sourceData.length === 0) {
+            this.logPending(`⏳ Datasource vacío (${sourceData.length}), guardando ${ids.length} IDs para procesar después`, ids);
+            this.pendingIdsInternal = ids;
+            this.pendingValue = value;
+            this.initialValueSet = true;
+            // ✅ Mostrar un placeholder visual mientras se cargan los datos
+            this.value = this.isMultiple() ? [] : null;
+            this.cdr.markForCheck();
+            this.cdr.detectChanges();
+            this.logDebug(`⏳ IDs guardados como pendientes:`, this.pendingIdsInternal);
+            return;
+        }
+        // ✅ Si tenemos IDs y el datasource existe, buscar los objetos
+        if (ids.length > 0 && sourceData.length > 0) {
+            this.logDebug(`🔍 Buscando ${ids.length} IDs en datasource de ${sourceData.length} elementos`);
+            const objetos = sourceData.filter((item) => ids.includes(Number(item[this.idKey()])));
+            const objetosOrdenados = ids
+                .map((id) => objetos.find((item) => Number(item[this.idKey()]) === id))
+                .filter((item) => item !== undefined);
+            items = objetosOrdenados;
+            // ✅ Si no se encontraron algunos IDs, guardarlos como pendientes
+            const idsNoEncontrados = ids.filter((id) => !objetos.some((item) => Number(item[this.idKey()]) === id));
+            if (idsNoEncontrados.length > 0) {
+                this.logPending(`⚠️ ${idsNoEncontrados.length} IDs no encontrados en datasource`, idsNoEncontrados);
+                this.pendingIdsInternal = idsNoEncontrados;
+                this.pendingValue = value;
+            }
+            else {
+                // ✅ Todos los IDs fueron encontrados
+                if (this.pendingIdsInternal.length > 0) {
+                    this.logPending('✅ Todos los IDs pendientes fueron resueltos', this.pendingIdsInternal);
+                    this.pendingIdsInternal = [];
+                    this.pendingValue = null;
+                }
+            }
+            this.logDebug(`🔍 Encontrados ${items.length} de ${ids.length} IDs`);
+        }
+        // ✅ Verificar que los items existan en el datasource
+        if (items.length > 0 && sourceData.length > 0) {
+            const itemsValidos = items.filter((item) => sourceData.some((s) => s[this.idKey()] === item[this.idKey()]));
+            if (itemsValidos.length !== items.length) {
+                this.logDebug(`⚠️ Algunos objetos no existen en datasource`, {
+                    original: items.length,
+                    validos: itemsValidos.length,
+                });
+                items = itemsValidos;
+            }
+        }
+        // ✅ Asignar el valor
+        if (this.isMultiple()) {
+            this.value = items;
+        }
+        else {
+            this.value = items.length > 0 ? items[0] : null;
+        }
+        this.initialValueSet = true;
+        this.cdr.detectChanges();
+        this.logDebug(`✅ Vista actualizada con ${items.length} elementos (${this.isMultiple() ? 'multiple' : 'single'})`);
+        if (this.pendingIdsInternal.length > 0) {
+            this.logDebug(`⏳ IDs pendientes actuales:`, this.pendingIdsInternal);
+        }
+    }
+    forceReload() {
+        this.logDebug('🔄 Forzando recarga');
+        if (this.ngControl?.control) {
+            const currentValue = this.ngControl.control.value;
+            this.logDebug('🔄 Valor actual del formulario:', currentValue);
+            this.writeValue(currentValue);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxAutocomplete, isStandalone: true, selector: "dsx-autocomplete", inputs: { datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, idKey: { classPropertyName: "idKey", publicName: "idKey", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, permitirCrear: { classPropertyName: "permitirCrear", publicName: "permitirCrear", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, factoryNuevoRegistro: { classPropertyName: "factoryNuevoRegistro", publicName: "factoryNuevoRegistro", isSignal: true, isRequired: false, transformFunction: null }, returnID: { classPropertyName: "returnID", publicName: "returnID", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsxAutocomplete),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    [multiple]=\"isMultiple()\"\r\n    [dropdown]=\"true\"\r\n    [showClear]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onNgModelChange($event)\"\r\n    (onBlur)=\"onTouched()\"\r\n    (onShow)=\"onShow()\"\r\n    (onHide)=\"onHide()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n    placeholder=\"Ingresa un texto....\"\r\n    [inputStyle]=\"{'text-transform': 'uppercase'}\"\r\n  >\r\n    <ng-template let-item pTemplate=\"selectedItem\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n\r\n    <ng-template let-item pTemplate=\"item\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n\r\n<!-- \u2728 Indicador de carga (cuando hay IDs pendientes) -->\r\n@if (pendingIds.length > 0 && debug() && isDevMode) {\r\n<div\r\n  style=\"\r\n    font-size: 10px;\r\n    color: #f59e0b;\r\n    margin-top: 2px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n  \"\r\n>\r\n  <span>\u23F3</span>\r\n  <span\r\n    >Cargando datos pendientes ({{ pendingIds.length }} IDs: [{{\r\n    pendingIds.join(', ') }}])</span\r\n  >\r\n</div>\r\n}\r\n\r\n<!-- \u2728 Bot\u00F3n de limpiar para modo single -->\r\n@if (!isMultiple() && value) {\r\n<button\r\n  type=\"button\"\r\n  (click)=\"clearSelection()\"\r\n  style=\"\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    background: transparent;\r\n    border: none;\r\n    cursor: pointer;\r\n    color: #999;\r\n    font-size: 14px;\r\n    z-index: 1;\r\n  \"\r\n  aria-label=\"Limpiar selecci\u00F3n\"\r\n>\r\n  \u2715\r\n</button>\r\n}\r\n\r\n<!-- Mensaje de error -->\r\n@if (showError() && errorControl()) {\r\n<dsx-message-error [control]=\"errorControl()\" />\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n<div\r\n  style=\"\r\n    margin-top: 8px;\r\n    font-size: 11px;\r\n    color: #666;\r\n    background: #f5f5f5;\r\n    padding: 6px 10px;\r\n    border-radius: 4px;\r\n    font-family: monospace;\r\n    border: 1px solid #ddd;\r\n  \"\r\n>\r\n  <div\r\n    style=\"\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      gap: 8px;\r\n      flex-wrap: wrap;\r\n    \"\r\n  >\r\n    <div>\r\n      <strong>\uD83D\uDD0D Debug:</strong>\r\n      <span style=\"margin-left: 8px\">Items: {{ getValueLength() }}</span>\r\n      <span style=\"margin-left: 8px\">IDs: {{ getValueDisplay('id') }}</span>\r\n      <span style=\"margin-left: 8px\"\r\n        >Nombres: {{ getValueDisplay('nombre') }}</span\r\n      >\r\n      <span style=\"margin-left: 8px; color: #888; font-size: 10px\">\r\n        | returnID: {{ returnID() ? '\u2705 IDs' : '\u274C Objetos' }} | Multiple: {{\r\n        isMultiple() ? '\u2705' : '\u274C' }} | Control: {{ controlName || 'sin nombre'\r\n        }}\r\n      </span>\r\n      @if (pendingIds.length > 0) {\r\n      <span style=\"margin-left: 8px; color: #f59e0b; font-weight: bold\">\r\n        | \u23F3 Pendientes: {{ pendingIds.length }} ({{ pendingIds.join(', ') }})\r\n      </span>\r\n      } @else {\r\n      <span style=\"margin-left: 8px; color: #10b981; font-weight: bold\">\r\n        | \u2705 Sin pendientes\r\n      </span>\r\n      }\r\n      <span style=\"margin-left: 8px; color: #888; font-size: 9px\">\r\n        | Logs: {{ pendingLogsInfo }}\r\n      </span>\r\n    </div>\r\n    <div\r\n      style=\"\r\n        font-size: 10px;\r\n        color: #333;\r\n        background: #e8e8e8;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n      \"\r\n    >\r\n      <strong>\uD83D\uDCCA Validaci\u00F3n:</strong>\r\n      <span [style.color]=\"controlValid ? 'green' : 'red'\">\r\n        {{ controlValid ? '\u2705 V\u00E1lido' : '\u274C Inv\u00E1lido' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Touched: {{ controlTouched ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Dirty: {{ controlDirty ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      @if (controlErrors) {\r\n      <span style=\"margin-left: 4px; color: red\">\r\n        | Errors: {{ controlErrors | json }}\r\n      </span>\r\n      }\r\n    </div>\r\n    <button\r\n      (click)=\"forceReload()\"\r\n      style=\"\r\n        font-size: 10px;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n        border: 1px solid #ccc;\r\n        background: white;\r\n        cursor: pointer;\r\n      \"\r\n      type=\"button\"\r\n    >\r\n      \uD83D\uDD04 Recargar\r\n    </button>\r\n  </div>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: JsonPipe, name: "json" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxAutocomplete, decorators: [{
+            type: Component,
+            args: [{ selector: 'dsx-autocomplete', imports: [
+                        AutoComplete,
+                        FormsModule,
+                        FloatLabel,
+                        JsonPipe,
+                        AppMessageErrorComponent,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsxAutocomplete),
+                            multi: true,
+                        },
+                    ], template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    [multiple]=\"isMultiple()\"\r\n    [dropdown]=\"true\"\r\n    [showClear]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onNgModelChange($event)\"\r\n    (onBlur)=\"onTouched()\"\r\n    (onShow)=\"onShow()\"\r\n    (onHide)=\"onHide()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n    placeholder=\"Ingresa un texto....\"\r\n    [inputStyle]=\"{'text-transform': 'uppercase'}\"\r\n  >\r\n    <ng-template let-item pTemplate=\"selectedItem\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n\r\n    <ng-template let-item pTemplate=\"item\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n\r\n<!-- \u2728 Indicador de carga (cuando hay IDs pendientes) -->\r\n@if (pendingIds.length > 0 && debug() && isDevMode) {\r\n<div\r\n  style=\"\r\n    font-size: 10px;\r\n    color: #f59e0b;\r\n    margin-top: 2px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n  \"\r\n>\r\n  <span>\u23F3</span>\r\n  <span\r\n    >Cargando datos pendientes ({{ pendingIds.length }} IDs: [{{\r\n    pendingIds.join(', ') }}])</span\r\n  >\r\n</div>\r\n}\r\n\r\n<!-- \u2728 Bot\u00F3n de limpiar para modo single -->\r\n@if (!isMultiple() && value) {\r\n<button\r\n  type=\"button\"\r\n  (click)=\"clearSelection()\"\r\n  style=\"\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    background: transparent;\r\n    border: none;\r\n    cursor: pointer;\r\n    color: #999;\r\n    font-size: 14px;\r\n    z-index: 1;\r\n  \"\r\n  aria-label=\"Limpiar selecci\u00F3n\"\r\n>\r\n  \u2715\r\n</button>\r\n}\r\n\r\n<!-- Mensaje de error -->\r\n@if (showError() && errorControl()) {\r\n<dsx-message-error [control]=\"errorControl()\" />\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n<div\r\n  style=\"\r\n    margin-top: 8px;\r\n    font-size: 11px;\r\n    color: #666;\r\n    background: #f5f5f5;\r\n    padding: 6px 10px;\r\n    border-radius: 4px;\r\n    font-family: monospace;\r\n    border: 1px solid #ddd;\r\n  \"\r\n>\r\n  <div\r\n    style=\"\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      gap: 8px;\r\n      flex-wrap: wrap;\r\n    \"\r\n  >\r\n    <div>\r\n      <strong>\uD83D\uDD0D Debug:</strong>\r\n      <span style=\"margin-left: 8px\">Items: {{ getValueLength() }}</span>\r\n      <span style=\"margin-left: 8px\">IDs: {{ getValueDisplay('id') }}</span>\r\n      <span style=\"margin-left: 8px\"\r\n        >Nombres: {{ getValueDisplay('nombre') }}</span\r\n      >\r\n      <span style=\"margin-left: 8px; color: #888; font-size: 10px\">\r\n        | returnID: {{ returnID() ? '\u2705 IDs' : '\u274C Objetos' }} | Multiple: {{\r\n        isMultiple() ? '\u2705' : '\u274C' }} | Control: {{ controlName || 'sin nombre'\r\n        }}\r\n      </span>\r\n      @if (pendingIds.length > 0) {\r\n      <span style=\"margin-left: 8px; color: #f59e0b; font-weight: bold\">\r\n        | \u23F3 Pendientes: {{ pendingIds.length }} ({{ pendingIds.join(', ') }})\r\n      </span>\r\n      } @else {\r\n      <span style=\"margin-left: 8px; color: #10b981; font-weight: bold\">\r\n        | \u2705 Sin pendientes\r\n      </span>\r\n      }\r\n      <span style=\"margin-left: 8px; color: #888; font-size: 9px\">\r\n        | Logs: {{ pendingLogsInfo }}\r\n      </span>\r\n    </div>\r\n    <div\r\n      style=\"\r\n        font-size: 10px;\r\n        color: #333;\r\n        background: #e8e8e8;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n      \"\r\n    >\r\n      <strong>\uD83D\uDCCA Validaci\u00F3n:</strong>\r\n      <span [style.color]=\"controlValid ? 'green' : 'red'\">\r\n        {{ controlValid ? '\u2705 V\u00E1lido' : '\u274C Inv\u00E1lido' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Touched: {{ controlTouched ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Dirty: {{ controlDirty ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      @if (controlErrors) {\r\n      <span style=\"margin-left: 4px; color: red\">\r\n        | Errors: {{ controlErrors | json }}\r\n      </span>\r\n      }\r\n    </div>\r\n    <button\r\n      (click)=\"forceReload()\"\r\n      style=\"\r\n        font-size: 10px;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n        border: 1px solid #ccc;\r\n        background: white;\r\n        cursor: pointer;\r\n      \"\r\n      type=\"button\"\r\n    >\r\n      \uD83D\uDD04 Recargar\r\n    </button>\r\n  </div>\r\n</div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: true }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], permitirCrear: [{ type: i0.Input, args: [{ isSignal: true, alias: "permitirCrear", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], factoryNuevoRegistro: [{ type: i0.Input, args: [{ isSignal: true, alias: "factoryNuevoRegistro", required: false }] }], returnID: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnID", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }] } });
+
 // dsx-select.component.ts
 class DsxSelect {
     injector = inject(Injector);