@acontplus/ng-components 2.1.14 → 2.1.16

package/fesm2022/acontplus-ng-components.mjs

@@ -344,38 +344,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 /**
  * Servicio centralizado para manejar z-index de todos los diálogos
  * Asegura que los diálogos siempre aparezcan en el orden correcto
+ * Los AlertDialogs siempre tienen prioridad sobre otros diálogos
  */
 class DialogZIndexService {
-    static currentZIndex = 1000;
+    // Rangos de z-index por tipo de diálogo
+    static Z_INDEX_RANGES = {
+        normal: { base: 1000, current: 1000 }, // Diálogos normales: 1000-1999
+        alert: { base: 2000, current: 2000 }, // AlertDialogs: 2000-2999 (siempre encima)
+        toast: { base: 3000, current: 3000 }, // Toasts: 3000-3999 (máxima prioridad)
+    };
     static Z_INDEX_INCREMENT = 10;
     /**
-     * Obtiene el siguiente z-index disponible
+     * Obtiene el siguiente z-index disponible para un tipo específico de diálogo
+     * @param type Tipo de diálogo (normal, alert, toast)
      * @returns El próximo z-index a usar
      */
-    getNextZIndex() {
-        DialogZIndexService.currentZIndex += DialogZIndexService.Z_INDEX_INCREMENT;
-        return DialogZIndexService.currentZIndex;
+    getNextZIndex(type = 'normal') {
+        const range = DialogZIndexService.Z_INDEX_RANGES[type];
+        range.current += DialogZIndexService.Z_INDEX_INCREMENT;
+        return range.current;
+    }
+    /**
+     * Obtiene el z-index actual más alto para un tipo específico
+     * @param type Tipo de diálogo
+     * @returns El z-index más alto actualmente en uso para ese tipo
+     */
+    getCurrentZIndex(type = 'normal') {
+        return DialogZIndexService.Z_INDEX_RANGES[type].current;
     }
     /**
-     * Obtiene el z-index actual más alto
-     * @returns El z-index más alto actualmente en uso
+     * Obtiene el z-index más alto de todos los tipos
+     * @returns El z-index más alto de todos los diálogos
      */
-    getCurrentZIndex() {
-        return DialogZIndexService.currentZIndex;
+    getHighestZIndex() {
+        return Math.max(...Object.values(DialogZIndexService.Z_INDEX_RANGES).map(range => range.current));
     }
     /**
      * Resetea el contador de z-index (útil para testing)
+     * @param type Tipo específico a resetear, o undefined para resetear todos
      */
-    reset() {
-        DialogZIndexService.currentZIndex = 1000;
+    reset(type) {
+        if (type) {
+            const range = DialogZIndexService.Z_INDEX_RANGES[type];
+            range.current = range.base;
+        }
+        else {
+            // Resetear todos los tipos
+            Object.entries(DialogZIndexService.Z_INDEX_RANGES).forEach(([_, range]) => {
+                range.current = range.base;
+            });
+        }
     }
     /**
      * Aplica z-index a un diálogo específico
      * @param dialogRef Referencia al diálogo
-     * @param zIndex Z-index a aplicar (opcional, si no se proporciona usa getNextZIndex())
+     * @param type Tipo de diálogo (determina el rango de z-index)
+     * @param zIndex Z-index específico a aplicar (opcional)
      */
-    applyZIndex(dialogRef, zIndex) {
-        const targetZIndex = zIndex || this.getNextZIndex();
+    applyZIndex(dialogRef, type = 'normal', zIndex) {
+        const targetZIndex = zIndex || this.getNextZIndex(type);
         setTimeout(() => {
             const overlayRef = dialogRef._overlayRef;
             if (overlayRef) {
@@ -383,8 +410,23 @@ class DialogZIndexService {
                 const backdrop = overlayRef.backdropElement;
                 if (pane) {
                     pane.style.zIndex = (targetZIndex + 2).toString();
+                    // Agregar atributo data para debugging
+                    pane.setAttribute('data-dialog-type', type);
+                    pane.setAttribute('data-z-index', targetZIndex.toString());
+                    // Para toasts, agregar clase especial para styling
+                    if (type === 'toast') {
+                        pane.classList.add('toast-overlay');
+                        // Los toasts no deben bloquear interacciones
+                        pane.style.pointerEvents = 'none';
+                        // Pero el contenido del toast sí debe ser clickeable
+                        const dialogContainer = pane.querySelector('.mat-mdc-dialog-container, .mat-dialog-container');
+                        if (dialogContainer) {
+                            dialogContainer.style.pointerEvents = 'auto';
+                        }
+                    }
                 }
-                if (backdrop) {
+                // Los toasts no tienen backdrop, pero si existe, configurarlo
+                if (backdrop && type !== 'toast') {
                     backdrop.style.zIndex = (targetZIndex + 1).toString();
                 }
             }
@@ -393,12 +435,14 @@ class DialogZIndexService {
     /**
      * Trae un diálogo al frente (usado por drag functionality)
      * @param element Elemento del diálogo a traer al frente
+     * @param type Tipo de diálogo
      */
-    bringToFront(element) {
+    bringToFront(element, type = 'normal') {
         const pane = element.closest('.cdk-overlay-pane');
         if (pane) {
-            const newZIndex = this.getNextZIndex();
+            const newZIndex = this.getNextZIndex(type);
             pane.style.zIndex = (newZIndex + 2).toString();
+            pane.setAttribute('data-z-index', newZIndex.toString());
             // También actualizar el backdrop si existe
             const backdrop = pane.parentElement?.querySelector('.cdk-overlay-backdrop');
             if (backdrop) {
@@ -406,6 +450,56 @@ class DialogZIndexService {
             }
         }
     }
+    /**
+     * Fuerza un diálogo a estar siempre encima de todos los demás
+     * Útil para alertas críticas que deben tener máxima prioridad
+     * @param dialogRef Referencia al diálogo
+     */
+    forceToTop(dialogRef) {
+        const highestZIndex = this.getHighestZIndex();
+        const topZIndex = highestZIndex + DialogZIndexService.Z_INDEX_INCREMENT;
+        setTimeout(() => {
+            const overlayRef = dialogRef._overlayRef;
+            if (overlayRef) {
+                const pane = overlayRef.overlayElement;
+                const backdrop = overlayRef.backdropElement;
+                if (pane) {
+                    pane.style.zIndex = (topZIndex + 2).toString();
+                    pane.setAttribute('data-z-index', topZIndex.toString());
+                    pane.setAttribute('data-forced-top', 'true');
+                }
+                if (backdrop) {
+                    backdrop.style.zIndex = (topZIndex + 1).toString();
+                }
+            }
+        }, 0);
+    }
+    /**
+     * Obtiene todos los toasts activos
+     * @returns Array de elementos de toast activos
+     */
+    getActiveToasts() {
+        return Array.from(document.querySelectorAll('.cdk-overlay-pane[data-dialog-type="toast"]'));
+    }
+    /**
+     * Cierra todos los toasts activos
+     */
+    closeAllToasts() {
+        const toasts = this.getActiveToasts();
+        toasts.forEach(toast => {
+            const closeButton = toast.querySelector('[mat-dialog-close], .toast-close-button');
+            if (closeButton) {
+                closeButton.click();
+            }
+        });
+    }
+    /**
+     * Obtiene el número de toasts activos
+     * @returns Número de toasts actualmente visibles
+     */
+    getActiveToastCount() {
+        return this.getActiveToasts().length;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogZIndexService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogZIndexService, providedIn: 'root' });
 }
@@ -1718,6 +1812,8 @@ class AlertDialogService {
         position: 'center',
         draggable: false,
         allowMultiple: false, // Por defecto no permitir múltiples alerts
+        forceToTop: true, // Por defecto los alerts siempre van encima
+        dialogType: 'alert', // Por defecto usar el tipo alert (z-index alto)
         // Nuevas opciones por defecto
         layout: 'modern',
         iconPosition: 'left',
@@ -1727,7 +1823,6 @@ class AlertDialogService {
         animation: 'fade',
         animationDuration: 300,
         toastMode: false,
-        toastPosition: 'top-right',
         autoClose: true,
         progressBar: true,
     };
@@ -1766,6 +1861,8 @@ class AlertDialogService {
             position: 'center',
             draggable: false,
             allowMultiple: false,
+            forceToTop: true,
+            dialogType: 'alert',
         };
     }
     /**
@@ -1783,14 +1880,22 @@ class AlertDialogService {
             mergedOptions.showConfirmButton = mergedOptions.showConfirmButton ?? false;
             mergedOptions.timer = mergedOptions.timer || 4000;
             mergedOptions.timerProgressBar = mergedOptions.progressBar ?? true;
-            mergedOptions.position = this.getToastPosition(mergedOptions.toastPosition || 'top-right');
+            // Si no se especificó position, usar por defecto para toasts
+            if (!mergedOptions.position) {
+                mergedOptions.position = 'top-end'; // Por defecto top-right para toasts
+            }
             mergedOptions.disableClose = false;
             mergedOptions.animation = mergedOptions.animation || 'slide';
-        }
+            mergedOptions.dialogType = 'toast'; // Los toasts usan el z-index más alto
+            // Configuración específica para toasts no-intrusivos
+            mergedOptions.closeOnBackdropClick = false; // No hay backdrop en toasts
+            mergedOptions.allowEscapeKey = false; // ESC no debe cerrar toasts
+            mergedOptions.allowMultiple = true; // Permitir múltiples toasts
+        }
+        // Determinar el tipo de diálogo para z-index
+        const dialogType = mergedOptions.dialogType || (mergedOptions.toastMode ? 'toast' : 'alert');
         // Calcular posición del diálogo
-        const position = mergedOptions.toastMode
-            ? this.getToastDialogPosition(mergedOptions.toastPosition || 'top-right')
-            : this.getDialogPosition(mergedOptions.position || 'center');
+        const position = this.getDialogPosition(mergedOptions.position || 'center');
         const dialogRef = this.dialog.open(AlertDialog, {
             width: mergedOptions.width,
             minWidth: mergedOptions.minWidth,
@@ -1804,10 +1909,17 @@ class AlertDialogService {
             closeOnNavigation: true,
             autoFocus: mergedOptions.focusConfirm !== false,
             restoreFocus: true,
-            hasBackdrop: !mergedOptions.toastMode,
+            hasBackdrop: !mergedOptions.toastMode, // Los toasts NO tienen backdrop
         });
         // Aplicar z-index dinámico usando el servicio centralizado
-        this.zIndexService.applyZIndex(dialogRef);
+        if (mergedOptions.forceToTop) {
+            // Si se requiere forzar al tope, usar forceToTop
+            this.zIndexService.forceToTop(dialogRef);
+        }
+        else {
+            // Usar el tipo de diálogo apropiado para z-index
+            this.zIndexService.applyZIndex(dialogRef, dialogType);
+        }
         // Callbacks de ciclo de vida
         if (mergedOptions.willOpen) {
             mergedOptions.willOpen();
@@ -1941,25 +2053,64 @@ class AlertDialogService {
         });
     }
     /**
-     * Toast notification (auto-cierre, posición personalizada)
+     * Toast notification (auto-cierre, posición personalizada, no-intrusivo)
      */
     toast(options) {
         const opts = typeof options === 'string' ? { message: options } : options;
         return this.fire({
+            // Valores por defecto que pueden ser sobrescritos
             timer: 3000,
-            timerProgressBar: true,
             showConfirmButton: false,
-            position: 'top-end',
+            position: 'bottom-start', // Valor por defecto
             width: '350px',
+            toastMode: true,
+            dialogType: 'toast',
+            forceToTop: false,
+            allowMultiple: true,
+            disableClose: true,
+            closeOnBackdropClick: false,
+            allowEscapeKey: false,
+            allowEnterKey: false,
+            autoClose: true,
+            progressBar: true,
+            // Los valores del usuario sobrescriben los por defecto
             ...opts,
         });
     }
+    /**
+     * Alerta crítica que siempre aparece encima de todo
+     */
+    critical(options) {
+        const opts = typeof options === 'string'
+            ? { message: options, title: '¡Atención!' }
+            : { title: '¡Atención!', ...options };
+        return this.fire({
+            ...opts,
+            type: 'error',
+            forceToTop: true,
+            disableClose: true,
+            closeOnBackdropClick: false,
+            allowEscapeKey: false,
+        });
+    }
     /**
      * Cerrar todos los diálogos abiertos
      */
     closeAll() {
         this.dialog.closeAll();
     }
+    /**
+     * Cerrar solo los toasts activos (mantener otros diálogos abiertos)
+     */
+    closeAllToasts() {
+        this.zIndexService.closeAllToasts();
+    }
+    /**
+     * Obtener el número de toasts activos
+     */
+    getActiveToastCount() {
+        return this.zIndexService.getActiveToastCount();
+    }
     getDialogPosition(position) {
         const positions = {
             top: { top: '20px' },
@@ -2012,28 +2163,6 @@ class AlertDialogService {
         }
         return classes;
     }
-    getToastPosition(position) {
-        const positionMap = {
-            'top-right': 'top-end',
-            'top-left': 'top-start',
-            'bottom-right': 'bottom-end',
-            'bottom-left': 'bottom-start',
-            'top-center': 'top',
-            'bottom-center': 'bottom',
-        };
-        return positionMap[position] || 'top-end';
-    }
-    getToastDialogPosition(position) {
-        const positions = {
-            'top-right': { top: '20px', right: '20px' },
-            'top-left': { top: '20px', left: '20px' },
-            'bottom-right': { bottom: '20px', right: '20px' },
-            'bottom-left': { bottom: '20px', left: '20px' },
-            'top-center': { top: '20px' },
-            'bottom-center': { bottom: '20px' },
-        };
-        return positions[position] || positions['top-right'];
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, providedIn: 'root' });
 }