@cqa-lib/cqa-ui 1.0.53 → 1.0.55

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -4207,59 +4207,75 @@ class TailwindOverlayContainer extends OverlayContainer {
         // Also check immediately in case overlays already exist
         requestAnimationFrame(() => this.updateContainerClass());
     }
-    isElementVisible(element) {
+    isElementClosing(element) {
+        // Check if element is closing (very low opacity AND shrinking dimensions)
         const style = window.getComputedStyle(element);
-        // Check if element is visible (not display: none, not opacity: 0, not visibility: hidden)
-        const isDisplayed = style.display !== 'none';
-        const isOpaque = parseFloat(style.opacity) > 0.01; // Allow for very small opacity values during animations
-        const isVisible = style.visibility !== 'hidden';
-        // Also check if element has dimensions (width/height > 0)
+        const opacity = parseFloat(style.opacity);
         const rect = element.getBoundingClientRect();
-        const hasSize = rect.width > 0 && rect.height > 0;
-        return isDisplayed && isOpaque && isVisible && hasSize;
+        // If opacity is very low (< 0.1) AND dimensions are very small, it's likely closing
+        // This helps filter out closing animations while allowing opening animations
+        return opacity < 0.1 && (rect.width < 10 || rect.height < 10);
     }
     updateContainerClass() {
         if (!this._containerElement)
             return;
         // Count library overlays (dialogs, select panels, datepicker panels)
-        // Only count overlays that are actually visible/active (not hidden or closing)
-        // Library dialogs - check visibility
+        // Count them if they exist in DOM (even during opening animations)
+        // But exclude them if they're clearly closing (very low opacity + small size)
+        // Library dialogs - count if not closing
         const libraryDialogs = Array.from(this._containerElement.querySelectorAll('.cqa-dialog-panel'));
-        const visibleLibraryDialogs = libraryDialogs.filter(dialog => this.isElementVisible(dialog)).length;
-        // Library backdrops - check visibility (backdrops can be transparent but still present)
+        const activeLibraryDialogs = libraryDialogs.filter(dialog => {
+            const style = window.getComputedStyle(dialog);
+            return style.display !== 'none' && !this.isElementClosing(dialog);
+        }).length;
+        // Library backdrops - check if showing (backdrops can be transparent but still present)
         const libraryBackdrops = Array.from(this._containerElement.querySelectorAll('.cqa-dialog-backdrop'));
-        const visibleLibraryBackdrops = libraryBackdrops.filter(backdrop => {
-            // Backdrops might have low opacity but should still be considered if they're showing
+        const activeLibraryBackdrops = libraryBackdrops.filter(backdrop => {
             const style = window.getComputedStyle(backdrop);
+            // Backdrop is active if it's showing (has the showing class) and not display: none
             return style.display !== 'none' && backdrop.classList.contains('cdk-overlay-backdrop-showing');
         }).length;
-        // Select panels - check visibility
+        // Select panels - count if not closing
         const selectPanels = Array.from(this._containerElement.querySelectorAll('.ctc-select-panel'));
-        const visibleSelectPanels = selectPanels.filter(panel => this.isElementVisible(panel)).length;
-        // Date panels - check visibility
+        const activeSelectPanels = selectPanels.filter(panel => {
+            const style = window.getComputedStyle(panel);
+            return style.display !== 'none' && !this.isElementClosing(panel);
+        }).length;
+        // Date panels - count if not closing
         const datePanels = Array.from(this._containerElement.querySelectorAll('.ctc-date-range-panel'));
-        const visibleDatePanels = datePanels.filter(panel => this.isElementVisible(panel)).length;
-        const totalLibraryOverlays = visibleLibraryDialogs + visibleLibraryBackdrops + visibleSelectPanels + visibleDatePanels;
+        const activeDatePanels = datePanels.filter(panel => {
+            const style = window.getComputedStyle(panel);
+            return style.display !== 'none' && !this.isElementClosing(panel);
+        }).length;
+        const totalLibraryOverlays = activeLibraryDialogs + activeLibraryBackdrops + activeSelectPanels + activeDatePanels;
         // Check for portal Material dialogs (those without .cqa-dialog-panel class)
         // Portal dialogs use .mat-dialog-container but NOT .cqa-dialog-panel
+        // Only count visible portal dialogs to avoid false positives
         const portalDialogs = Array.from(this._containerElement.querySelectorAll('.mat-dialog-container:not(.cqa-dialog-panel)'));
-        const visiblePortalDialogs = portalDialogs.filter(dialog => this.isElementVisible(dialog)).length;
-        // Decision logic: Only add cqa-ui-root when VISIBLE library overlays are present
-        // This ensures portal Material dialogs don't get affected by library CSS
-        // even if library overlays are in the DOM but closing/hidden
+        const visiblePortalDialogs = portalDialogs.filter(dialog => {
+            const style = window.getComputedStyle(dialog);
+            const rect = dialog.getBoundingClientRect();
+            return style.display !== 'none' &&
+                parseFloat(style.opacity) > 0.1 &&
+                rect.width > 0 &&
+                rect.height > 0;
+        }).length;
+        // Decision logic: Add cqa-ui-root when library overlays are present (even during opening animations)
+        // Remove it only when library overlays are clearly gone or closing
+        // This ensures library overlays get styles immediately, while portal dialogs don't get affected
         if (totalLibraryOverlays > 0) {
-            // Visible library overlays exist - add the class (they need Tailwind styles scoped to .cqa-ui-root)
+            // Library overlays exist - add the class (they need Tailwind styles scoped to .cqa-ui-root)
             this._containerElement.classList.add('cqa-ui-root');
         }
         else {
-            // No visible library overlays exist - remove the class
+            // No active library overlays exist - remove the class
             // This handles:
             // 1. Only portal dialogs exist (should not have cqa-ui-root)
-            // 2. Library overlays are closing/hidden (should not have cqa-ui-root)
+            // 2. Library overlays are closing/closed (should not have cqa-ui-root)
             // 3. No overlays exist at all (clean state)
             this._containerElement.classList.remove('cqa-ui-root');
         }
-        // Note: If both library overlays and portal dialogs exist simultaneously and are visible,
+        // Note: If both library overlays and portal dialogs exist simultaneously,
         // the class will be present because library overlays need it. In this case,
         // portal dialogs may be affected by library CSS. To avoid this, ensure library
         // overlays are closed before opening portal dialogs, or use CSS specificity