@cqa-lib/cqa-ui 1.0.12 → 1.0.13

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

@@ -3361,16 +3361,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 /**
- * Ensures Angular CDK overlay content (e.g., MatSelect, Datepicker panels)
+ * Ensures Angular CDK overlay content (e.g., MatSelect, Datepicker panels, library dialogs)
  * is nested under an element with id="cqa-ui-root" so Tailwind utilities
  * configured with important: '#cqa-ui-root' are applied inside overlays.
+ *
+ * IMPORTANT: Only sets id="cqa-ui-root" when library overlays are present.
+ * Portal Material dialogs should NOT have this ID to prevent library CSS from affecting them.
  */
 class TailwindOverlayContainer extends OverlayContainer {
+    constructor() {
+        super(...arguments);
+        this.libraryOverlayCount = 0;
+    }
     _createContainer() {
         super._createContainer();
         if (this._containerElement) {
+            // Don't set ID initially - we'll set it dynamically when library overlays are created
+            this._containerElement.id = '';
+            // Use MutationObserver to detect when library overlays are created/destroyed
+            this.observeLibraryOverlays();
+        }
+    }
+    observeLibraryOverlays() {
+        if (!this._containerElement)
+            return;
+        const observer = new MutationObserver(() => {
+            this.updateContainerId();
+        });
+        observer.observe(this._containerElement, {
+            childList: true,
+            subtree: true,
+        });
+        // Also check immediately in case overlays already exist
+        setTimeout(() => this.updateContainerId(), 0);
+    }
+    updateContainerId() {
+        if (!this._containerElement)
+            return;
+        // Count library overlays (dialogs, select panels, datepicker panels)
+        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)
+        const portalDialogs = this._containerElement.querySelectorAll('.mat-dialog-container:not(.cqa-dialog-panel)').length;
+        if (totalLibraryOverlays > 0) {
+            // Library overlays exist - set the ID
             this._containerElement.id = 'cqa-ui-root';
         }
+        else if (portalDialogs > 0 && totalLibraryOverlays === 0) {
+            // Only portal dialogs exist - remove the ID to prevent library CSS from affecting them
+            this._containerElement.id = '';
+        }
+        // If both exist, keep the ID (library overlays need it, CSS resets will handle portal dialogs)
     }
 }
 TailwindOverlayContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TailwindOverlayContainer, deps: null, target: i0.ɵɵFactoryTarget.Injectable });