ngx-dsxlibrary 2.21.70 → 2.21.71

package/fesm2022/ngx-dsxlibrary.mjs

@@ -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');
 
 /**
@@ -4102,181 +4277,6 @@ 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)
- *
- * **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 };
-}
-
 /**
  * Paleta corporativa de colores para `dsx-button`.
  *
@@ -4303,22 +4303,22 @@ 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',
     },
@@ -8702,6 +8774,10 @@ class DsxAutocomplete {
     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 */ []));
@@ -8723,6 +8799,14 @@ class DsxAutocomplete {
     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;
     }
@@ -8773,11 +8857,19 @@ class DsxAutocomplete {
                 });
             }
         });
+        // ✅ Effect mejorado para recargar cuando cambia el datasource
         effect(() => {
             const ds = this.datasource();
-            if (ds.length > 0 && this.initialValueSet) {
+            if (ds.length > 0) {
                 this.logDebug('📚 Datasource actualizado:', ds.length);
-                if (this.ngControl?.control?.value) {
+                // ✅ 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);
                 }
@@ -8824,6 +8916,70 @@ class DsxAutocomplete {
         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();
@@ -8862,13 +9018,10 @@ class DsxAutocomplete {
             .replace(/\s+/g, ' ')
             .trim();
     }
-    // ✨ CORREGIDO: evaluarYAgregar para manejar valores no encontrados
     evaluarYAgregar(event) {
         const valorInput = event.target.value?.trim();
         if (!valorInput) {
             this.dataFiltrada.set([]);
-            // Si el input está vacío y hay valor seleccionado, mantenerlo
-            // Si no hay valor, asegurar que el formulario tenga null o []
             if (this.obtenerArrayValue().length === 0) {
                 this.actualizarFormulario([]);
             }
@@ -8929,11 +9082,8 @@ class DsxAutocomplete {
             this.logDebug('🆕 Nuevo elemento creado', valorInput);
         }
         else {
-            // ✅ NO permite crear: limpiar el valor a null o []
             this.logDebug('⚠️ No se encontraron coincidencias y no se permite crear', valorInput);
-            // ✨ IMPORTANTE: Limpiar la selección a null o []
             this.actualizarFormulario([]);
-            // Marcar como touched para mostrar validación
             if (this.ngControl?.control) {
                 this.ngControl.control.markAsTouched();
                 this.onTouched();
@@ -9059,9 +9209,7 @@ class DsxAutocomplete {
             this.timeoutLimpieza = null;
         }
     }
-    // ✨ MEJORADO: actualizarFormulario para manejar correctamente valores vacíos
     actualizarFormulario(nuevaLista) {
-        // Si la lista está vacía, siempre enviar null o [] según el modo
         if (nuevaLista.length === 0) {
             if (this.isMultiple()) {
                 this.value = [];
@@ -9077,7 +9225,6 @@ class DsxAutocomplete {
             });
             return;
         }
-        // Si hay elementos, procesar normalmente
         if (this.isMultiple()) {
             this.value = nuevaLista;
         }
@@ -9096,6 +9243,7 @@ class DsxAutocomplete {
     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}`, {
@@ -9113,10 +9261,16 @@ class DsxAutocomplete {
             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();
@@ -9127,6 +9281,11 @@ class DsxAutocomplete {
         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();
@@ -9134,41 +9293,73 @@ class DsxAutocomplete {
             }
             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();
-        if (ids.length > 0) {
-            if (sourceData.length === 0) {
-                this.logDebug(`⚠️ Datasource vacío, guardando IDs para luego`);
-                this.value = this.isMultiple() ? [] : null;
-                this.initialValueSet = true;
-                this.cdr.markForCheck();
-                this.cdr.detectChanges();
-                return;
-            }
+        // ✅ 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) {
@@ -9179,6 +9370,7 @@ class DsxAutocomplete {
                 items = itemsValidos;
             }
         }
+        // ✅ Asignar el valor
         if (this.isMultiple()) {
             this.value = items;
         }
@@ -9188,6 +9380,9 @@ class DsxAutocomplete {
         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');
@@ -9214,7 +9409,7 @@ class DsxAutocomplete {
                 useExisting: forwardRef(() => DsxAutocomplete),
                 multi: true,
             },
-        ], ngImport: i0, template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    appendTo=\"body\"\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<!-- 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    </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" }] });
+        ], 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,
@@ -9230,7 +9425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => DsxAutocomplete),
                             multi: true,
                         },
-                    ], template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    appendTo=\"body\"\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<!-- 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    </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" }]
+                    ], 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