@cqa-lib/cqa-ui 1.0.68 → 1.0.70

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

@@ -4274,12 +4274,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 /**
- * Ensures Angular CDK overlay content (e.g., MatSelect, Datepicker panels, library dialogs)
- * is nested under an element with class="cqa-ui-root" so Tailwind utilities
- * configured with important: '.cqa-ui-root' are applied inside overlays.
+ * Custom overlay container that adds 'cqa-ui-root' class to individual overlay panes
+ * containing library components, rather than to the entire container.
  *
- * IMPORTANT: Only sets class="cqa-ui-root" when library overlays are present.
- * Portal Material dialogs should NOT have this class to prevent library CSS from affecting them.
+ * This ensures library CSS (scoped with .cqa-ui-root) only affects library overlays,
+ * not portal overlays that may be open simultaneously.
  */
 class TailwindOverlayContainer extends OverlayContainer {
     constructor() {
@@ -4289,13 +4288,13 @@ class TailwindOverlayContainer extends OverlayContainer {
     _createContainer() {
         super._createContainer();
         if (this._containerElement) {
-            // Don't set class initially - we'll set it dynamically when library overlays are created
+            // Never add cqa-ui-root to the container itself
             this._containerElement.classList.remove('cqa-ui-root');
-            // Use MutationObserver to detect when library overlays are created/destroyed
-            this.observeLibraryOverlays();
+            // Use MutationObserver to detect when overlay panes are created/destroyed
+            this.observeOverlayPanes();
         }
     }
-    observeLibraryOverlays() {
+    observeOverlayPanes() {
         if (!this._containerElement)
             return;
         const observer = new MutationObserver(() => {
@@ -4304,49 +4303,44 @@ class TailwindOverlayContainer extends OverlayContainer {
                 cancelAnimationFrame(this.updateTimeout);
             }
             this.updateTimeout = requestAnimationFrame(() => {
-                this.updateContainerClass();
+                this.updateOverlayPaneClasses();
                 this.updateTimeout = null;
             });
         });
         observer.observe(this._containerElement, {
             childList: true,
             subtree: true,
+            attributes: true,
+            attributeFilter: ['class']
         });
         // Also check immediately in case overlays already exist
-        requestAnimationFrame(() => this.updateContainerClass());
+        requestAnimationFrame(() => this.updateOverlayPaneClasses());
     }
-    updateContainerClass() {
+    updateOverlayPaneClasses() {
         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;
-        // 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
-        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:
-            // 1. Only portal dialogs exist (should not have cqa-ui-root)
-            // 2. No overlays exist at all (clean state)
-            this._containerElement.classList.remove('cqa-ui-root');
-        }
-        // 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
-        // to override library styles within portal dialogs.
+        // Find all overlay panes in the container
+        const allPanes = this._containerElement.querySelectorAll('.cdk-overlay-pane');
+        allPanes.forEach((pane) => {
+            // Check if this pane itself has library component classes
+            // These classes are added via panelClass property in library components
+            const hasLibraryDialog = pane.classList.contains('cqa-dialog-panel');
+            const hasLibraryBackdrop = pane.classList.contains('cqa-dialog-backdrop');
+            const hasLibrarySelect = pane.classList.contains('ctc-select-panel');
+            const hasLibraryDatePicker = pane.classList.contains('ctc-date-range-panel');
+            // Also check for library components inside the pane (for dialogs that use mat-dialog-container)
+            const hasLibraryDialogInside = pane.querySelector('.cqa-dialog-panel') !== null;
+            const isLibraryOverlay = hasLibraryDialog || hasLibraryBackdrop || hasLibrarySelect ||
+                hasLibraryDatePicker || hasLibraryDialogInside;
+            if (isLibraryOverlay) {
+                // This is a library overlay - add the class
+                pane.classList.add('cqa-ui-root');
+            }
+            else {
+                // This is NOT a library overlay (e.g., portal dialog) - ensure class is removed
+                pane.classList.remove('cqa-ui-root');
+            }
+        });
     }
 }
 TailwindOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TailwindOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });