@cqa-lib/cqa-ui 1.0.52 → 1.0.54

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

@@ -4207,31 +4207,72 @@ class TailwindOverlayContainer extends OverlayContainer {
         // Also check immediately in case overlays already exist
         requestAnimationFrame(() => this.updateContainerClass());
     }
+    isElementClosing(element) {
+        // Check if element is closing (very low opacity AND shrinking dimensions)
+        const style = window.getComputedStyle(element);
+        const opacity = parseFloat(style.opacity);
+        const rect = element.getBoundingClientRect();
+        // 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)
-        // 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;
+        // 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 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 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 - count if not closing
+        const selectPanels = Array.from(this._containerElement.querySelectorAll('.ctc-select-panel'));
+        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 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
-        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
-        // This ensures portal Material dialogs don't get affected by library CSS
+        // 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 => {
+            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) {
             // 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 active 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/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,