@cqa-lib/cqa-ui 1.0.52 → 1.0.53

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

@@ -4207,34 +4207,59 @@ class TailwindOverlayContainer extends OverlayContainer {
         // Also check immediately in case overlays already exist
         requestAnimationFrame(() => this.updateContainerClass());
     }
+    isElementVisible(element) {
+        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 rect = element.getBoundingClientRect();
+        const hasSize = rect.width > 0 && rect.height > 0;
+        return isDisplayed && isOpaque && isVisible && hasSize;
+    }
     updateContainerClass() {
         if (!this._containerElement)
             return;
         // Count library overlays (dialogs, select panels, datepicker panels)
-        // These are library-specific classes that indicate library components
-        // Only count overlays that are actually in the DOM (CDK removes them when closed)
-        const libraryDialogs = this._containerElement.querySelectorAll('.cqa-dialog-panel').length;
-        const libraryBackdrops = this._containerElement.querySelectorAll('.cqa-dialog-backdrop').length;
-        const librarySelectPanels = this._containerElement.querySelectorAll('.ctc-select-panel').length;
-        const libraryDatePanels = this._containerElement.querySelectorAll('.ctc-date-range-panel').length;
-        const totalLibraryOverlays = libraryDialogs + libraryBackdrops + librarySelectPanels + libraryDatePanels;
+        // Only count overlays that are actually visible/active (not hidden or closing)
+        // Library dialogs - check visibility
+        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 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 style = window.getComputedStyle(backdrop);
+            return style.display !== 'none' && backdrop.classList.contains('cdk-overlay-backdrop-showing');
+        }).length;
+        // Select panels - check visibility
+        const selectPanels = Array.from(this._containerElement.querySelectorAll('.ctc-select-panel'));
+        const visibleSelectPanels = selectPanels.filter(panel => this.isElementVisible(panel)).length;
+        // Date panels - check visibility
+        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;
         // Check for portal Material dialogs (those without .cqa-dialog-panel class)
         // Portal dialogs use .mat-dialog-container but NOT .cqa-dialog-panel
-        const portalDialogs = this._containerElement.querySelectorAll('.mat-dialog-container:not(.cqa-dialog-panel)').length;
-        // Decision logic: Only add cqa-ui-root when library overlays are present
+        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
         if (totalLibraryOverlays > 0) {
-            // Library overlays exist - add the class (they need Tailwind styles scoped to .cqa-ui-root)
+            // Visible library overlays exist - add the class (they need Tailwind styles scoped to .cqa-ui-root)
             this._containerElement.classList.add('cqa-ui-root');
         }
         else {
-            // No library overlays exist - remove the class
-            // This handles both cases:
+            // No visible library overlays exist - remove the class
+            // This handles:
             // 1. Only portal dialogs exist (should not have cqa-ui-root)
-            // 2. No overlays exist at all (clean state)
+            // 2. Library overlays are closing/hidden (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,
+        // Note: If both library overlays and portal dialogs exist simultaneously and are visible,
         // 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