codexly-ui 0.0.74 → 0.0.76

package/fesm2022/codexly-ui.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, effect, signal, inject, ElementRef, InjectionToken, PLATFORM_ID, Injectable, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, Directive, output, contentChildren, NgZone, model, untracked, forwardRef, viewChild, HostListener, ViewChildren, contentChild, Injector, ViewChild, ChangeDetectorRef, ContentChildren, Input, numberAttribute, booleanAttribute } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, effect, signal, inject, ElementRef, InjectionToken, PLATFORM_ID, Injectable, Renderer2, ApplicationRef, EnvironmentInjector, DestroyRef, createComponent, Directive, output, contentChildren, NgZone, model, untracked, forwardRef, viewChild, HostListener, ViewChildren, contentChild, Injector, ViewChild, ChangeDetectorRef, ContentChildren, Input, numberAttribute, booleanAttribute, runInInjectionContext } from '@angular/core';
 import { isPlatformBrowser, CurrencyPipe, NgTemplateOutlet, DecimalPipe, NgStyle, DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl, FormControl, ReactiveFormsModule, FormGroup, Validators } from '@angular/forms';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startWith, map, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
 import * as i1$1 from '@angular/cdk/overlay';
-import { ScrollStrategyOptions, OverlayModule, Overlay, OverlayConfig } from '@angular/cdk/overlay';
+import { ScrollStrategyOptions, OverlayModule, Overlay, OverlayConfig, OverlayContainer } from '@angular/cdk/overlay';
 import { Chart, LineController, BarController, PieController, DoughnutController, RadarController, PolarAreaController, CategoryScale, LinearScale, RadialLinearScale, BarElement, LineElement, PointElement, ArcElement, Filler, Tooltip, Legend } from 'chart.js';
 import * as i1$2 from '@angular/cdk/portal';
 import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
@@ -13955,17 +13955,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/** Dedicated OverlayContainer for toasts — lives in its own div above all modals */
+class ToastOverlayContainer extends OverlayContainer {
+    _createContainer() {
+        const el = document.createElement('div');
+        el.classList.add('clx-toast-overlay-container');
+        el.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:0;z-index:99999;pointer-events:none;';
+        document.body.appendChild(el);
+        this._containerElement = el;
+    }
+}
 class ClxToastService {
-    _overlay = inject(Overlay);
     _injector = inject(Injector);
+    _toastOverlay = null;
     _containers = new Map();
+    _getOverlay() {
+        if (this._toastOverlay)
+            return this._toastOverlay;
+        const childInjector = Injector.create({
+            parent: this._injector,
+            providers: [
+                {
+                    provide: OverlayContainer,
+                    useFactory: () => runInInjectionContext(this._injector, () => new ToastOverlayContainer()),
+                },
+                { provide: Overlay },
+            ],
+        });
+        this._toastOverlay = childInjector.get(Overlay);
+        return this._toastOverlay;
+    }
     // ─── Core show ─────────────────────────────────────────────────────────────
     show(options) {
         const position = options.position ?? TOAST_DEFAULTS.position;
         const container = this._getOrCreateContainer(position);
-        // Move toast pane to end of CDK container so it's always above modals
-        const hostEl = container.overlayRef.hostElement;
-        hostEl.parentElement?.appendChild(hostEl);
         const entry = {
             id: this._uid(),
             type: options.type ?? TOAST_DEFAULTS.type,
@@ -14007,14 +14030,12 @@ class ClxToastService {
         const existing = this._containers.get(position);
         if (existing)
             return existing;
-        const overlayRef = this._overlay.create(new OverlayConfig({
+        const overlay = this._getOverlay();
+        const overlayRef = overlay.create(new OverlayConfig({
             hasBackdrop: false,
-            scrollStrategy: this._overlay.scrollStrategies.noop(),
-            positionStrategy: this._overlay.position().global(),
+            scrollStrategy: overlay.scrollStrategies.noop(),
+            positionStrategy: overlay.position().global(),
         }));
-        // Force pane above any modal overlay
-        overlayRef.overlayElement.style.zIndex = '99999';
-        overlayRef.hostElement.style.zIndex = '99999';
         const portal = new ComponentPortal(ClxToastContainerComponent, null, Injector.create({ parent: this._injector, providers: [] }));
         const compRef = overlayRef.attach(portal);
         compRef.setInput('position', position);