codexly-ui 0.0.70 → 0.0.72

package/assets/styles/_globals.css

@@ -5,15 +5,6 @@
   -webkit-backdrop-filter: blur(4px);
 }
 
-/* ── CDK overlay z-index ─────────────────────────────────────────────────── */
-.cdk-overlay-container {
-  z-index: 1000 !important;
-}
-
-/* ── Toast always on top ─────────────────────────────────────────────────── */
-clx-toast-container {
-  z-index: 9999 !important;
-}
 
 /* ── Scrollbar ───────────────────────────────────────────────────────────── */
 ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }

package/fesm2022/codexly-ui.mjs

@@ -6,7 +6,7 @@ import { NG_VALUE_ACCESSOR, FormsModule, NgControl, FormControl, ReactiveFormsMo
 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, OverlayContainer, OverlayConfig } from '@angular/cdk/overlay';
+import { ScrollStrategyOptions, OverlayModule, Overlay, OverlayConfig } 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';
@@ -6264,7 +6264,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 class ClxToastContainerComponent {
     entries = model([], ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
     position = model('top-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    /** Called by service to get the ClxToastComponent instance for exit animation */
     toastRefs;
     _positionClass = computed(() => TOAST_POSITION_MAP[this.position()], ...(ngDevMode ? [{ debugName: "_positionClass" }] : /* istanbul ignore next */ []));
     async requestDismiss(id) {
@@ -6272,13 +6271,12 @@ class ClxToastContainerComponent {
         if (ref) {
             await ref.playExitAnimation();
         }
-        this.entries.update(list => list.filter(e => e.id !== id));
+        this.entries.set(this.entries().filter(e => e.id !== id));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxToastContainerComponent, isStandalone: true, selector: "clx-toast-container", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entries: "entriesChange", position: "positionChange" }, viewQueries: [{ propertyName: "toastRefs", predicate: ClxToastComponent, descendants: true }], ngImport: i0, template: `
     <div
       class="clx-toast-stack fixed flex flex-col gap-2 w-full max-w-sm pointer-events-none sm:max-w-sm max-sm:max-w-full max-sm:left-0! max-sm:right-0! max-sm:translate-x-0! max-sm:px-3 max-sm:items-stretch!"
-      style="z-index: 99999"
       [class]="_positionClass()"
     >
       @for (entry of entries(); track entry.id) {
@@ -6290,14 +6288,13 @@ class ClxToastContainerComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: ["clx-toast-container{display:block;position:fixed;inset:0;pointer-events:none;z-index:999999}@media(max-width:639px){.clx-toast-stack{left:0!important;right:0!important;transform:none!important;padding-left:.75rem;padding-right:.75rem;max-width:100%!important;align-items:stretch!important}}\n"], dependencies: [{ kind: "component", type: ClxToastComponent, selector: "clx-toast", inputs: ["entry"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@media(max-width:639px){.clx-toast-stack{left:0!important;right:0!important;transform:none!important;padding-left:.75rem;padding-right:.75rem;max-width:100%!important;align-items:stretch!important}}\n"], dependencies: [{ kind: "component", type: ClxToastComponent, selector: "clx-toast", inputs: ["entry"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxToastContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'clx-toast-container', standalone: true, imports: [ClxToastComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div
       class="clx-toast-stack fixed flex flex-col gap-2 w-full max-w-sm pointer-events-none sm:max-w-sm max-sm:max-w-full max-sm:left-0! max-sm:right-0! max-sm:translate-x-0! max-sm:px-3 max-sm:items-stretch!"
-      style="z-index: 99999"
       [class]="_positionClass()"
     >
       @for (entry of entries(); track entry.id) {
@@ -6309,7 +6306,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         </div>
       }
     </div>
-  `, styles: ["clx-toast-container{display:block;position:fixed;inset:0;pointer-events:none;z-index:999999}@media(max-width:639px){.clx-toast-stack{left:0!important;right:0!important;transform:none!important;padding-left:.75rem;padding-right:.75rem;max-width:100%!important;align-items:stretch!important}}\n"] }]
+  `, styles: ["@media(max-width:639px){.clx-toast-stack{left:0!important;right:0!important;transform:none!important;padding-left:.75rem;padding-right:.75rem;max-width:100%!important;align-items:stretch!important}}\n"] }]
         }], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: false }] }, { type: i0.Output, args: ["entriesChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }, { type: i0.Output, args: ["positionChange"] }], toastRefs: [{
                 type: ViewChildren,
                 args: [ClxToastComponent]
@@ -8977,14 +8974,10 @@ class ClxModalService {
     _overlay;
     _injector;
     _focusTrapFactory;
-    _overlayContainer;
     constructor() {
         this._overlay = inject(Overlay);
         this._injector = inject(Injector);
         this._focusTrapFactory = inject(FocusTrapFactory);
-        this._overlayContainer = inject(OverlayContainer);
-        // Keep CDK overlay below toast (toast uses z-index 99999)
-        this._overlayContainer.getContainerElement().style.zIndex = '1000';
     }
     open(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13963,17 +13956,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], ctorParameters: () => [] });
 
 class ClxToastService {
-    _appRef;
+    _overlay = inject(Overlay);
+    _injector = inject(Injector);
     _containers = new Map();
-    constructor() {
-        this._appRef = inject(ApplicationRef);
-    }
     // ─── Core show ─────────────────────────────────────────────────────────────
     show(options) {
         const position = options.position ?? TOAST_DEFAULTS.position;
         const container = this._getOrCreateContainer(position);
-        // Always move toast container to end of body so it renders above CDK overlays
-        document.body.appendChild(container.location.nativeElement);
         const entry = {
             id: this._uid(),
             type: options.type ?? TOAST_DEFAULTS.type,
@@ -13991,7 +13980,8 @@ class ClxToastService {
             removing: false,
         };
         const isBottom = position.startsWith('bottom');
-        container.instance.entries.update((list) => isBottom ? [...list, entry] : [entry, ...list]);
+        const list = container.instance.entries();
+        container.instance.entries.set(isBottom ? [...list, entry] : [entry, ...list]);
     }
     // ─── Convenience shortcuts ─────────────────────────────────────────────────
     success(message, opts = {}) {
@@ -14006,25 +13996,26 @@ class ClxToastService {
     info(message, opts = {}) {
         this.show({ ...opts, type: 'sky', message });
     }
-    /** Dismiss all toasts across all containers immediately (no exit anim). */
     dismissAll() {
-        this._containers.forEach(ref => ref.instance.entries.set([]));
+        this._containers.forEach(c => c.instance.entries.set([]));
     }
     // ─── Container management ──────────────────────────────────────────────────
     _getOrCreateContainer(position) {
         const existing = this._containers.get(position);
         if (existing)
             return existing;
-        const ref = createComponent(ClxToastContainerComponent, {
-            environmentInjector: this._appRef.injector,
-        });
-        ref.setInput('position', position);
-        this._appRef.attachView(ref.hostView);
-        const el = ref.location.nativeElement;
-        el.style.zIndex = '99999';
-        document.body.appendChild(el);
-        this._containers.set(position, ref);
-        return ref;
+        const overlayRef = this._overlay.create(new OverlayConfig({
+            hasBackdrop: false,
+            panelClass: 'clx-toast-overlay',
+            scrollStrategy: this._overlay.scrollStrategies.noop(),
+            positionStrategy: this._overlay.position().global(),
+        }));
+        const portal = new ComponentPortal(ClxToastContainerComponent, null, Injector.create({ parent: this._injector, providers: [] }));
+        const compRef = overlayRef.attach(portal);
+        compRef.setInput('position', position);
+        const entry = { overlayRef, instance: compRef.instance };
+        this._containers.set(position, entry);
+        return entry;
     }
     // ─── Utilities ─────────────────────────────────────────────────────────────
     _uid() {
@@ -14036,7 +14027,7 @@ class ClxToastService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxToastService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+        }] });
 
 const PROGRESS_BAR_SIZE_MAP = {
     xs: 'h-1',