codexly-ui 0.0.77 → 0.0.79

package/fesm2022/codexly-ui.mjs

@@ -1,16 +1,13 @@
 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, runInInjectionContext } 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 { 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, OverlayContainer } from '@angular/cdk/overlay';
+import { ScrollStrategyOptions, OverlayModule } 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';
-import { FocusTrapFactory } from '@angular/cdk/a11y';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
@@ -8906,122 +8903,100 @@ const EDITOR_SIZE_MAP = {
 };
 
 /**
- * Internal shell component — mounted via ComponentPortal onto the CDK overlay.
- * Renders the user's component via a second ComponentPortal inside cdkPortalOutlet.
- * Owns the enter / exit animation so every modal gets consistent motion.
+ * Minimal overlay engine — no CDK, no stacking context wars.
+ * Creates a fixed container div in document.body with explicit z-index.
  */
-class ClxModalWrapperComponent {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    portal = model(null, ...(ngDevMode ? [{ debugName: "portal" }] : /* istanbul ignore next */ []));
-    _animate = inject(ClxAnimateService);
-    _el = inject((ElementRef));
-    _animConfig = inject(CLX_MODAL_ANIM_CONFIG, { optional: true })
-        ?? MODAL_ANIM_DEFAULTS;
-    /** Resolved by ClxModalService so closeWithAnimation can call through */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onClose;
-    ngOnInit() {
-        const target = this._panel();
-        if (target) {
-            this._animate.animate(target, {
-                animation: this._animConfig.animationIn,
-                duration: this._animConfig.animationDuration,
-                trigger: 'manual',
-            });
-        }
+class ClxNativeOverlayService {
+    _appRef = inject(ApplicationRef);
+    _injector = inject(Injector);
+    /** Block body scroll like CDK used to */
+    _scrollBlocked = 0;
+    mount(component, injector, options) {
+        // ── backdrop ────────────────────────────────────────────────────────────
+        let backdropEl = null;
+        if (options.backdrop) {
+            backdropEl = document.createElement('div');
+            backdropEl.style.cssText =
+                `position:fixed;inset:0;z-index:${options.zIndex};`;
+            if (options.backdropClass)
+                backdropEl.className = options.backdropClass;
+            document.body.appendChild(backdropEl);
+        }
+        // ── container ────────────────────────────────────────────────────────────
+        const container = document.createElement('div');
+        container.style.cssText =
+            `position:fixed;inset:0;z-index:${options.zIndex + 1};pointer-events:none;display:flex;align-items:center;justify-content:center;padding:1rem;box-sizing:border-box;`;
+        if (options.containerStyle) {
+            Object.assign(container.style, options.containerStyle);
+        }
+        document.body.appendChild(container);
+        // ── component ────────────────────────────────────────────────────────────
+        const compRef = createComponent(component, {
+            environmentInjector: this._appRef.injector,
+            elementInjector: injector,
+        });
+        this._appRef.attachView(compRef.hostView);
+        const el = compRef.location.nativeElement;
+        el.style.pointerEvents = 'auto';
+        container.appendChild(el);
+        // ── scroll block ─────────────────────────────────────────────────────────
+        this._blockScroll();
+        const overlayRef = {
+            backdrop: backdropEl,
+            container,
+            destroy: () => {
+                compRef.destroy();
+                backdropEl?.remove();
+                container.remove();
+                this._unblockScroll();
+            },
+        };
+        return { compRef, overlayRef };
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    closeWithAnimation(result) {
-        const target = this._panel();
-        if (!target) {
-            this.onClose?.(result);
-            return;
+    _blockScroll() {
+        this._scrollBlocked++;
+        if (this._scrollBlocked === 1) {
+            document.body.style.overflow = 'hidden';
         }
-        this._animate
-            .animate(target, {
-            animation: this._animConfig.animationOut,
-            duration: this._animConfig.animationDuration,
-            trigger: 'manual',
-            fillMode: 'forwards',
-        })
-            .then(() => this.onClose?.(result));
     }
-    /**
-     * Returns the first real element child of this wrapper — which is the
-     * rendered panel (clx-modal host) inserted by cdkPortalOutlet.
-     * The wrapper itself is display:contents so the panel is its direct child.
-     */
-    _panel() {
-        return this._el.nativeElement.firstElementChild;
+    _unblockScroll() {
+        this._scrollBlocked = Math.max(0, this._scrollBlocked - 1);
+        if (this._scrollBlocked === 0) {
+            document.body.style.overflow = '';
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxModalWrapperComponent, isStandalone: true, selector: "clx-modal-wrapper", inputs: { portal: { classPropertyName: "portal", publicName: "portal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { portal: "portalChange" }, host: { styleAttribute: "display:contents" }, ngImport: i0, template: `<ng-container [cdkPortalOutlet]="portal()" />`, isInline: true, dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNativeOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNativeOverlayService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalWrapperComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'clx-modal-wrapper',
-                    standalone: true,
-                    imports: [PortalModule],
-                    template: `<ng-container [cdkPortalOutlet]="portal()" />`,
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'display:contents' },
-                }]
-        }], propDecorators: { portal: [{ type: i0.Input, args: [{ isSignal: true, alias: "portal", required: false }] }, { type: i0.Output, args: ["portalChange"] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNativeOverlayService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
+const SIZE_MAX_WIDTH = {
+    sm: '480px',
+    md: '680px',
+    lg: '900px',
+    xl: '1200px',
+    full: '100vw',
+};
 class ClxModalService {
-    _overlay;
-    _injector;
-    _focusTrapFactory;
-    constructor() {
-        this._overlay = inject(Overlay);
-        this._injector = inject(Injector);
-        this._focusTrapFactory = inject(FocusTrapFactory);
-    }
+    _overlay = inject(ClxNativeOverlayService);
+    _animate = inject(ClxAnimateService);
+    _injector = inject(Injector);
     open(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     component, config = {}) {
-        const { hasBackdrop = true, disableClose = false, panelClass = [], size = 'md', data, animationIn = MODAL_ANIM_DEFAULTS.animationIn, animationOut = MODAL_ANIM_DEFAULTS.animationOut, animationDuration = MODAL_ANIM_DEFAULTS.animationDuration, } = config;
+        const { hasBackdrop = true, disableClose = false, size = 'md', data, animationIn = MODAL_ANIM_DEFAULTS.animationIn, animationOut = MODAL_ANIM_DEFAULTS.animationOut, animationDuration = MODAL_ANIM_DEFAULTS.animationDuration, } = config;
         const animConfig = { animationIn, animationOut, animationDuration };
+        const maxWidth = SIZE_MAX_WIDTH[size] ?? '680px';
         let _resolve;
         const _afterClosed = new Promise(res => (_resolve = res));
-        let _focusTrap = null;
         let _closing = false;
-        /** Plays exit animation then tears down the overlay. */
-        const closeViaAnimation = (result) => {
-            if (_closing)
-                return;
-            _closing = true;
-            wrapperRef.instance.closeWithAnimation(result);
-        };
         const modalRef = {
             close(result) { closeViaAnimation(result); },
             afterClosed() { return _afterClosed; },
         };
-        const extraClasses = Array.isArray(panelClass) ? panelClass : [panelClass];
-        const sizeMaxWidth = {
-            sm: '480px',
-            md: '680px',
-            lg: '900px',
-            xl: '1200px',
-            full: '100vw',
-        };
-        const maxWidth = sizeMaxWidth[size] ?? '600px';
-        const overlayRef = this._overlay.create(new OverlayConfig({
-            hasBackdrop,
-            backdropClass: 'clx-modal-backdrop',
-            panelClass: extraClasses,
-            scrollStrategy: this._overlay.scrollStrategies.block(),
-            positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
-            width: `min(calc(100vw - 2rem), ${maxWidth})`,
-            maxWidth: maxWidth,
-            maxHeight: '90vh',
-        }));
-        Object.assign(overlayRef.overlayElement.style, {
-            display: 'flex',
-            flexDirection: 'column',
-        });
         const innerInjector = Injector.create({
             parent: this._injector,
             providers: [
@@ -9031,27 +9006,49 @@ class ClxModalService {
                 { provide: CLX_MODAL_SIZE, useValue: size },
             ],
         });
-        // Attach wrapper — CDK creates the backdrop on attach()
-        const wrapperPortal = new ComponentPortal(ClxModalWrapperComponent, null, innerInjector);
-        const wrapperRef = overlayRef.attach(wrapperPortal);
-        // Wire the actual teardown through the wrapper instance
-        wrapperRef.instance.onClose = (result) => {
-            _focusTrap?.destroy();
-            overlayRef.dispose();
-            _resolve(result);
+        const { compRef, overlayRef } = this._overlay.mount(component, innerInjector, {
+            zIndex: 1000,
+            backdrop: hasBackdrop,
+            backdropClass: 'clx-modal-backdrop',
+        });
+        const panelEl = compRef.location.nativeElement;
+        panelEl.style.width = `min(calc(100vw - 2rem), ${maxWidth})`;
+        panelEl.style.maxWidth = maxWidth;
+        panelEl.style.maxHeight = '90vh';
+        // Enter animation
+        this._animate.animate(panelEl, {
+            animation: animationIn,
+            duration: animationDuration,
+            trigger: 'manual',
+        });
+        const closeViaAnimation = (result) => {
+            if (_closing)
+                return;
+            _closing = true;
+            this._animate.animate(panelEl, {
+                animation: animationOut,
+                duration: animationDuration,
+                trigger: 'manual',
+                fillMode: 'forwards',
+            }).then(() => {
+                overlayRef.destroy();
+                _resolve(result);
+            });
         };
-        // Mount user component inside the wrapper via a second portal
-        const contentPortal = new ComponentPortal(component, null, innerInjector);
-        wrapperRef.instance.portal.set(contentPortal);
-        if (hasBackdrop && !disableClose) {
-            overlayRef.backdropClick().subscribe(() => closeViaAnimation());
+        // Backdrop click
+        if (hasBackdrop && !disableClose && overlayRef.backdrop) {
+            overlayRef.backdrop.addEventListener('click', () => closeViaAnimation());
         }
+        // Escape key
         if (!disableClose) {
-            overlayRef.keydownEvents().subscribe(e => { if (e.key === 'Escape')
-                closeViaAnimation(); });
+            const onKey = (e) => {
+                if (e.key === 'Escape') {
+                    closeViaAnimation();
+                    document.removeEventListener('keydown', onKey);
+                }
+            };
+            document.addEventListener('keydown', onKey);
         }
-        _focusTrap = this._focusTrapFactory.create(overlayRef.overlayElement);
-        _focusTrap.focusInitialElementWhenReady();
         return modalRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -9060,7 +9057,7 @@ class ClxModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+        }] });
 
 let _clxEditorId = 0;
 const TOOLBAR_GROUPS = [
@@ -9804,6 +9801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             }] } });
 
 const SWITCH_SIZE_MAP = {
+    xs: { track: 'w-7 h-4', thumb: 'w-3 h-3', translate: 'translate-x-3', label: 'text-xs' },
     sm: { track: 'w-9 h-5', thumb: 'w-4 h-4', translate: 'translate-x-4', label: 'text-xs' },
     md: { track: 'w-12 h-6', thumb: 'w-5 h-5', translate: 'translate-x-6', label: 'text-sm' },
     lg: { track: 'w-14 h-7', thumb: 'w-6 h-6', translate: 'translate-x-7', label: 'text-base' },
@@ -13795,45 +13793,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             }] } });
 
 class ClxAlertService {
-    _overlay;
-    _injector;
-    _focusTrapFactory;
-    constructor() {
-        this._overlay = inject(Overlay);
-        this._injector = inject(Injector);
-        this._focusTrapFactory = inject(FocusTrapFactory);
-    }
-    // ─── Core open ────────────────────────────────────────────────────────────
+    _overlay = inject(ClxNativeOverlayService);
+    _injector = inject(Injector);
     open(options = {}) {
         const backdrop = options.backdrop ?? ALERT_DEFAULTS.backdrop;
         const disableClose = options.disableClose ?? ALERT_DEFAULTS.disableClose;
         let _resolve;
         const promise = new Promise(res => (_resolve = res));
-        let _focusTrap = null;
-        // Wrap resolve so we can dispose the overlay after the exit animation
         const resolve = (result) => {
-            _focusTrap?.destroy();
-            overlayRef.dispose();
+            overlayRef.destroy();
             _resolve(result);
         };
-        const overlayRef = this._overlay.create(new OverlayConfig({
-            hasBackdrop: backdrop,
-            backdropClass: 'clx-alert-backdrop',
-            scrollStrategy: this._overlay.scrollStrategies.block(),
-            positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
-        }));
-        // Make the overlay pane a flex centering layer
-        Object.assign(overlayRef.overlayElement.style, {
-            position: 'fixed',
-            inset: '0',
-            width: '100vw',
-            height: '100vh',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '1rem',
-            boxSizing: 'border-box',
-        });
         const innerInjector = Injector.create({
             parent: this._injector,
             providers: [
@@ -13841,19 +13811,25 @@ class ClxAlertService {
                 { provide: CLX_ALERT_RESOLVE, useValue: resolve },
             ],
         });
-        overlayRef.attach(new ComponentPortal(ClxAlertComponent, null, innerInjector));
-        if (backdrop && !disableClose) {
-            overlayRef.backdropClick().subscribe(() => resolve(false));
+        const { overlayRef } = this._overlay.mount(ClxAlertComponent, innerInjector, {
+            zIndex: 1000,
+            backdrop,
+            backdropClass: 'clx-alert-backdrop',
+        });
+        if (backdrop && !disableClose && overlayRef.backdrop) {
+            overlayRef.backdrop.addEventListener('click', () => resolve(false));
         }
         if (!disableClose) {
-            overlayRef.keydownEvents().subscribe(e => { if (e.key === 'Escape')
-                resolve(false); });
+            const onKey = (e) => {
+                if (e.key === 'Escape') {
+                    resolve(false);
+                    document.removeEventListener('keydown', onKey);
+                }
+            };
+            document.addEventListener('keydown', onKey);
         }
-        _focusTrap = this._focusTrapFactory.create(overlayRef.overlayElement);
-        _focusTrap.focusInitialElementWhenReady();
         return promise;
     }
-    // ─── Convenience shortcuts ────────────────────────────────────────────────
     success(title, message, opts = {}) {
         return this.open({ type: 'success', title, message, ...opts });
     }
@@ -13867,13 +13843,7 @@ class ClxAlertService {
         return this.open({ type: 'info', title, message, ...opts });
     }
     confirm(title, message, opts = {}) {
-        return this.open({
-            type: 'confirm',
-            title,
-            message,
-            showCancelButton: true,
-            ...opts,
-        });
+        return this.open({ type: 'confirm', title, message, showCancelButton: true, ...opts });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAlertService, providedIn: 'root' });
@@ -13881,42 +13851,23 @@ class ClxAlertService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAlertService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class ClxDrawerService {
-    _overlay;
-    _injector;
-    _focusTrapFactory;
-    constructor() {
-        this._overlay = inject(Overlay);
-        this._injector = inject(Injector);
-        this._focusTrapFactory = inject(FocusTrapFactory);
-    }
+    _overlay = inject(ClxNativeOverlayService);
+    _animate = inject(ClxAnimateService);
+    _injector = inject(Injector);
     open(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     component, config = {}) {
-        const { hasBackdrop = false, disableClose = false, panelClass = [], size = 'md', data, } = config;
+        const { hasBackdrop = false, disableClose = false, size = 'md', data, } = config;
         let _resolve;
         const _afterClosed = new Promise(res => (_resolve = res));
-        let _focusTrap = null;
+        let _closing = false;
         const drawerRef = {
-            close(result) {
-                _focusTrap?.destroy();
-                overlayRef.dispose();
-                _resolve(result);
-            },
-            afterClosed() {
-                return _afterClosed;
-            },
+            close(result) { closeViaAnimation(result); },
+            afterClosed() { return _afterClosed; },
         };
-        const extraClasses = Array.isArray(panelClass) ? panelClass : [panelClass];
-        const overlayRef = this._overlay.create(new OverlayConfig({
-            hasBackdrop,
-            backdropClass: 'clx-modal-backdrop',
-            panelClass: extraClasses,
-            scrollStrategy: this._overlay.scrollStrategies.block(),
-            positionStrategy: this._overlay.position().global().right('0').top('0'),
-        }));
         const innerInjector = Injector.create({
             parent: this._injector,
             providers: [
@@ -13925,26 +13876,51 @@ class ClxDrawerService {
                 { provide: CLX_DRAWER_SIZE, useValue: size },
             ],
         });
-        // Attach wrapper via ComponentPortal — CDK creates backdrop on attach()
-        const wrapperPortal = new ComponentPortal(ClxModalWrapperComponent, null, innerInjector);
-        const wrapperRef = overlayRef.attach(wrapperPortal);
-        // El pane ya tiene width/height del OverlayConfig.
-        // Solo desactivamos pointer-events en el overlay element (no en el pane)
-        // para que el click-through funcione cuando no hay backdrop.
-        overlayRef.overlayElement.style.pointerEvents = 'none';
-        wrapperRef.location.nativeElement.style.pointerEvents = 'auto';
-        // Mount user component inside the wrapper via a second portal
-        const contentPortal = new ComponentPortal(component, null, innerInjector);
-        wrapperRef.instance.portal.set(contentPortal);
-        if (hasBackdrop && !disableClose) {
-            overlayRef.backdropClick().subscribe(() => drawerRef.close());
+        const { compRef, overlayRef } = this._overlay.mount(component, innerInjector, {
+            zIndex: 1000,
+            backdrop: hasBackdrop,
+            backdropClass: 'clx-modal-backdrop',
+            containerStyle: {
+                alignItems: 'flex-start',
+                justifyContent: 'flex-end',
+                padding: '0',
+            },
+        });
+        const panelEl = compRef.location.nativeElement;
+        panelEl.style.height = '100vh';
+        panelEl.style.pointerEvents = 'auto';
+        // Slide in from right
+        this._animate.animate(panelEl, {
+            animation: 'fadeInRight',
+            duration: 300,
+            trigger: 'manual',
+        });
+        const closeViaAnimation = (result) => {
+            if (_closing)
+                return;
+            _closing = true;
+            this._animate.animate(panelEl, {
+                animation: 'fadeOutRight',
+                duration: 300,
+                trigger: 'manual',
+                fillMode: 'forwards',
+            }).then(() => {
+                overlayRef.destroy();
+                _resolve(result);
+            });
+        };
+        if (hasBackdrop && !disableClose && overlayRef.backdrop) {
+            overlayRef.backdrop.addEventListener('click', () => closeViaAnimation());
         }
         if (!disableClose) {
-            overlayRef.keydownEvents().subscribe(e => { if (e.key === 'Escape')
-                drawerRef.close(); });
+            const onKey = (e) => {
+                if (e.key === 'Escape') {
+                    closeViaAnimation();
+                    document.removeEventListener('keydown', onKey);
+                }
+            };
+            document.addEventListener('keydown', onKey);
         }
-        _focusTrap = this._focusTrapFactory.create(overlayRef.overlayElement);
-        _focusTrap.focusInitialElementWhenReady();
         return drawerRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -13953,47 +13929,16 @@ class ClxDrawerService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxDrawerService, decorators: [{
             type: Injectable,
             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 {
+    _appRef = inject(ApplicationRef);
     _injector = inject(Injector);
-    _toastOverlay = null;
+    // Each position has its own container div at z-index 9000 (above modals)
     _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 our dedicated overlay container to the end of body on every show
-        // so it always appears after any modal cdk-overlay-container
-        const el = container.overlayRef.overlayElement.closest('.clx-toast-overlay-container');
-        if (el)
-            document.body.appendChild(el);
         const entry = {
             id: this._uid(),
             type: options.type ?? TOAST_DEFAULTS.type,
@@ -14014,7 +13959,6 @@ class ClxToastService {
         const list = container.instance.entries();
         container.instance.entries.set(isBottom ? [...list, entry] : [entry, ...list]);
     }
-    // ─── Convenience shortcuts ─────────────────────────────────────────────────
     success(message, opts = {}) {
         this.show({ ...opts, type: 'green', message });
     }
@@ -14030,25 +13974,26 @@ class ClxToastService {
     dismissAll() {
         this._containers.forEach(c => c.instance.entries.set([]));
     }
-    // ─── Container management ──────────────────────────────────────────────────
     _getOrCreateContainer(position) {
         const existing = this._containers.get(position);
         if (existing)
             return existing;
-        const overlay = this._getOverlay();
-        const overlayRef = overlay.create(new OverlayConfig({
-            hasBackdrop: false,
-            scrollStrategy: overlay.scrollStrategies.noop(),
-            positionStrategy: 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 };
+        // Dedicated div — completely separate from modal's DOM tree
+        const el = document.createElement('div');
+        el.style.cssText = 'position:fixed;inset:0;z-index:9000;pointer-events:none;';
+        document.body.appendChild(el);
+        const ref = createComponent(ClxToastContainerComponent, {
+            environmentInjector: this._appRef.injector,
+            elementInjector: this._injector,
+        });
+        ref.setInput('position', position);
+        this._appRef.attachView(ref.hostView);
+        const compEl = ref.location.nativeElement;
+        el.appendChild(compEl);
+        const entry = { el, instance: ref.instance };
         this._containers.set(position, entry);
         return entry;
     }
-    // ─── Utilities ─────────────────────────────────────────────────────────────
     _uid() {
         return `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
     }