ngx-kit 7.2.0 → 7.3.0

package/fesm2022/{ngx-kit-shared.mjs → ngx-kit-core.mjs}

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, HostListener, ViewChild, Output, Input, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, InjectionToken, PLATFORM_ID, Inject, Injectable, DestroyRef, signal, computed } from '@angular/core';
+import { EventEmitter, forwardRef, HostListener, ViewChild, Output, Input, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, InjectionToken, PLATFORM_ID, Inject, Injectable, DestroyRef, signal, computed, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, Validators } from '@angular/forms';
 
 function getOffsetPosition(evt, parent) {
@@ -672,40 +672,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 args: ['window:resize']
             }] } });
 
-function isPlainObject(value) {
-    return (value !== null && typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype);
-}
-function mergeConfig(base, override) {
-    if (override == null) {
-        return structuredClone(base);
-    }
-    return merge(base, override);
-}
-function merge(base, override) {
-    if (override === undefined) {
-        return base;
-    }
-    if (base === undefined) {
-        return override;
-    }
-    if (Array.isArray(base) && Array.isArray(override)) {
-        return [...override];
-    }
-    if (isPlainObject(base) && isPlainObject(override)) {
-        const result = {};
-        const keys = new Set([...Object.keys(base), ...Object.keys(override)]);
-        for (const key of keys) {
-            if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
-                continue;
-            }
-            result[key] = merge(base[key], override[key]);
-        }
-        return result;
-    }
-    // Primitive / Function / Class / Date / RegExp ...
-    return override;
-}
-
 const WINDOW = new InjectionToken('WINDOW', {
     factory: () => (typeof window !== 'undefined' ? window : null),
 });
@@ -865,6 +831,268 @@ function filterNodes(nodes, filterFn, childrenKeyName) {
     return result;
 }
 
+const COLOR_FUNCTION_REGEX = /\b(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\(\s*[^)]*\)/gi;
+const HEX_COLOR_REGEX = /#[a-f\d]{3,4}(?:[a-f\d]{2}){0,2}\b/gi;
+/**
+ * CSS named colors.
+ *
+ * Includes all standard CSS color keywords plus:
+ * - transparent
+ * - currentcolor
+ */
+const CSS_COLOR_NAMES = {
+    aliceblue: '#f0f8ff',
+    antiquewhite: '#faebd7',
+    aqua: '#00ffff',
+    aquamarine: '#7fffd4',
+    azure: '#f0ffff',
+    beige: '#f5f5dc',
+    bisque: '#ffe4c4',
+    black: '#000000',
+    blanchedalmond: '#ffebcd',
+    blue: '#0000ff',
+    blueviolet: '#8a2be2',
+    brown: '#a52a2a',
+    burlywood: '#deb887',
+    cadetblue: '#5f9ea0',
+    chartreuse: '#7fff00',
+    chocolate: '#d2691e',
+    coral: '#ff7f50',
+    cornflowerblue: '#6495ed',
+    cornsilk: '#fff8dc',
+    crimson: '#dc143c',
+    cyan: '#00ffff',
+    darkblue: '#00008b',
+    darkcyan: '#008b8b',
+    darkgoldenrod: '#b8860b',
+    darkgray: '#a9a9a9',
+    darkgreen: '#006400',
+    darkgrey: '#a9a9a9',
+    darkkhaki: '#bdb76b',
+    darkmagenta: '#8b008b',
+    darkolivegreen: '#556b2f',
+    darkorange: '#ff8c00',
+    darkorchid: '#9932cc',
+    darkred: '#8b0000',
+    darksalmon: '#e9967a',
+    darkseagreen: '#8fbc8f',
+    darkslateblue: '#483d8b',
+    darkslategray: '#2f4f4f',
+    darkslategrey: '#2f4f4f',
+    darkturquoise: '#00ced1',
+    darkviolet: '#9400d3',
+    deeppink: '#ff1493',
+    deepskyblue: '#00bfff',
+    dimgray: '#696969',
+    dimgrey: '#696969',
+    dodgerblue: '#1e90ff',
+    firebrick: '#b22222',
+    floralwhite: '#fffaf0',
+    forestgreen: '#228b22',
+    fuchsia: '#ff00ff',
+    gainsboro: '#dcdcdc',
+    ghostwhite: '#f8f8ff',
+    gold: '#ffd700',
+    goldenrod: '#daa520',
+    gray: '#808080',
+    green: '#008000',
+    greenyellow: '#adff2f',
+    grey: '#808080',
+    honeydew: '#f0fff0',
+    hotpink: '#ff69b4',
+    indianred: '#cd5c5c',
+    indigo: '#4b0082',
+    ivory: '#fffff0',
+    khaki: '#f0e68c',
+    lavender: '#e6e6fa',
+    lavenderblush: '#fff0f5',
+    lawngreen: '#7cfc00',
+    lemonchiffon: '#fffacd',
+    lightblue: '#add8e6',
+    lightcoral: '#f08080',
+    lightcyan: '#e0ffff',
+    lightgoldenrodyellow: '#fafad2',
+    lightgray: '#d3d3d3',
+    lightgreen: '#90ee90',
+    lightgrey: '#d3d3d3',
+    lightpink: '#ffb6c1',
+    lightsalmon: '#ffa07a',
+    lightseagreen: '#20b2aa',
+    lightskyblue: '#87cefa',
+    lightslategray: '#778899',
+    lightslategrey: '#778899',
+    lightsteelblue: '#b0c4de',
+    lightyellow: '#ffffe0',
+    lime: '#00ff00',
+    limegreen: '#32cd32',
+    linen: '#faf0e6',
+    magenta: '#ff00ff',
+    maroon: '#800000',
+    mediumaquamarine: '#66cdaa',
+    mediumblue: '#0000cd',
+    mediumorchid: '#ba55d3',
+    mediumpurple: '#9370db',
+    mediumseagreen: '#3cb371',
+    mediumslateblue: '#7b68ee',
+    mediumspringgreen: '#00fa9a',
+    mediumturquoise: '#48d1cc',
+    mediumvioletred: '#c71585',
+    midnightblue: '#191970',
+    mintcream: '#f5fffa',
+    mistyrose: '#ffe4e1',
+    moccasin: '#ffe4b5',
+    navajowhite: '#ffdead',
+    navy: '#000080',
+    oldlace: '#fdf5e6',
+    olive: '#808000',
+    olivedrab: '#6b8e23',
+    orange: '#ffa500',
+    orangered: '#ff4500',
+    orchid: '#da70d6',
+    palegoldenrod: '#eee8aa',
+    palegreen: '#98fb98',
+    paleturquoise: '#afeeee',
+    palevioletred: '#db7093',
+    papayawhip: '#ffefd5',
+    peachpuff: '#ffdab9',
+    peru: '#cd853f',
+    pink: '#ffc0cb',
+    plum: '#dda0dd',
+    powderblue: '#b0e0e6',
+    purple: '#800080',
+    rebeccapurple: '#663399',
+    red: '#ff0000',
+    rosybrown: '#bc8f8f',
+    royalblue: '#4169e1',
+    saddlebrown: '#8b4513',
+    salmon: '#fa8072',
+    sandybrown: '#f4a460',
+    seagreen: '#2e8b57',
+    seashell: '#fff5ee',
+    sienna: '#a0522d',
+    silver: '#c0c0c0',
+    skyblue: '#87ceeb',
+    slateblue: '#6a5acd',
+    slategray: '#708090',
+    slategrey: '#708090',
+    snow: '#fffafa',
+    springgreen: '#00ff7f',
+    steelblue: '#4682b4',
+    tan: '#d2b48c',
+    teal: '#008080',
+    thistle: '#d8bfd8',
+    tomato: '#ff6347',
+    turquoise: '#40e0d0',
+    violet: '#ee82ee',
+    wheat: '#f5deb3',
+    white: '#ffffff',
+    whitesmoke: '#f5f5f5',
+    yellow: '#ffff00',
+    yellowgreen: '#9acd32',
+};
+/**
+ * Extract all CSS colors from an arbitrary CSS string.
+ *
+ * Supports:
+ * - Hex: #fff, #ffff, #ffffff, #ffffffff
+ * - rgb()
+ * - rgba()
+ * - hsl()
+ * - hsla()
+ * - hwb()
+ * - lab()
+ * - lch()
+ * - oklab()
+ * - oklch()
+ * - color()
+ * - CSS named colors
+ * - transparent
+ * - currentcolor
+ *
+ * Works with values such as:
+ *
+ *   box-shadow: 0 0 10px red, 0 0 20px #00ff00;
+ *   linear-gradient(red, rgba(0, 0, 0, .5));
+ *   radial-gradient(circle, blue 0%, transparent 100%);
+ *   conic-gradient(from 90deg, yellow, #ff0000);
+ */
+function extractCssColors(value) {
+    if (!value) {
+        return [];
+    }
+    const colors = [];
+    const seen = new Set();
+    const addColor = (color) => {
+        const normalized = color.trim();
+        if (!normalized) {
+            return;
+        }
+        const key = normalized.toLowerCase();
+        if (seen.has(key)) {
+            return;
+        }
+        seen.add(key);
+        colors.push(normalized);
+    };
+    // ---------------------------------------------------------
+    // 1. Hex colors
+    // ---------------------------------------------------------
+    for (const match of value.matchAll(HEX_COLOR_REGEX)) {
+        addColor(match[0]);
+    }
+    // ---------------------------------------------------------
+    // 2. CSS color functions
+    // ---------------------------------------------------------
+    for (const match of value.matchAll(COLOR_FUNCTION_REGEX)) {
+        const candidate = match[0];
+        if (isValidCssColor(candidate)) {
+            addColor(candidate);
+        }
+    }
+    // ---------------------------------------------------------
+    // 3. Named colors
+    // ---------------------------------------------------------
+    /**
+     * We intentionally extract words instead of putting all named
+     * colors into one huge regex.
+     */
+    const words = value.match(/\b[a-z][a-z0-9-]*\b/gi) ?? [];
+    for (const word of words) {
+        const normalized = word.toLowerCase();
+        if (!CSS_COLOR_NAMES[normalized]) {
+            continue;
+        }
+        if (isValidCssColor(word)) {
+            addColor(word);
+        }
+    }
+    return colors;
+}
+/**
+ * Uses the browser's CSS parser to validate a color.
+ *
+ * This is much safer than trying to validate every possible
+ * CSS color syntax manually.
+ */
+function isValidCssColor(value) {
+    if (typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+        return CSS.supports('color', value);
+    }
+    // SSR / Node fallback.
+    return isFallbackCssColor(value);
+}
+/**
+ * Minimal validation for environments without CSS.supports(),
+ * such as SSR or Node tests.
+ */
+function isFallbackCssColor(value) {
+    const normalized = value.trim().toLowerCase();
+    if (CSS_COLOR_NAMES[normalized]) {
+        return true;
+    }
+    return /^#[a-f\d]{3,4}(?:[a-f\d]{2}){0,2}$/i.test(normalized);
+}
+
 class BrowserService {
     platformId;
     constructor(platformId) {
@@ -948,341 +1176,681 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         }], ctorParameters: () => [] });
 
 class OverlayRef {
-    dialogEl;
-    teardownFn;
+    element;
+    closeFn;
     componentRef;
-    templateRef;
-    constructor(dialogEl, teardownFn, componentRef, templateRef) {
-        this.dialogEl = dialogEl;
-        this.teardownFn = teardownFn;
+    template;
+    constructor(element, closeFn, componentRef, template) {
+        this.element = element;
+        this.closeFn = closeFn;
         this.componentRef = componentRef;
-        this.templateRef = templateRef;
+        this.template = template;
     }
     close() {
-        this.teardownFn();
+        this.closeFn();
     }
     get nativeElement() {
-        return this.dialogEl;
+        return this.element;
+    }
+    static noop() {
+        return new OverlayRef(null, () => { });
     }
 }
 
-const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const FOCUSABLE_SELECTOR = [
+    'button:not([disabled])',
+    '[href]',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
 const DIALOG_OVERLAY_CLASSNAME = 'ngx-ui-overlay';
+const OVERLAY_HOST_CLASSNAME = 'ngx-ui-overlay-host';
+const BASE_Z_INDEX = 1000;
 class OverlayService {
-    overlayStacks = [];
-    listenersAttached = false;
-    resizeRafPending = false;
-    doc = inject(DOCUMENT);
-    abortController = new AbortController();
+    document = inject(DOCUMENT);
     directionService = inject(DirectionService);
-    ngOnDestroy() {
-        this.closeAll();
-        this.abortController.abort();
+    platformId = inject(PLATFORM_ID);
+    applicationRef = inject(ApplicationRef);
+    environmentInjector = inject(EnvironmentInjector);
+    overlayStack = [];
+    globalListenersAttached = false;
+    layoutRaf = null;
+    bodyScrollLockCount = 0;
+    previousBodyOverflow = null;
+    previousBodyPaddingRight = null;
+    get isBrowser() {
+        return isPlatformBrowser(this.platformId);
+    }
+    /** Number of overlays currently open. */
+    get openCount() {
+        return this.overlayStack.length;
     }
     open(options) {
-        const { anchor, point, component, viewContainerRef, configure, onClosed, placement, alignment, margin, } = options;
-        if (!viewContainerRef) {
-            throw new Error('ViewContainerRef is required to render overlay content.');
+        if (!this.isBrowser) {
+            return OverlayRef.noop();
+        }
+        const { component, viewContainerRef, configure, onClosed } = options;
+        const instance = this.createComponentInstance(options, component, viewContainerRef);
+        this.pushInstance(instance);
+        this.renderHost(instance);
+        this.attachGlobalListeners();
+        instance.onClosed = onClosed;
+        configure?.(instance.componentRef.instance, new OverlayRef(instance.element, instance.cleanup, instance.componentRef));
+        this.scheduleInitialLayout(instance);
+        return new OverlayRef(instance.element, instance.cleanup, instance.componentRef);
+    }
+    openTemplate(options) {
+        if (!this.isBrowser) {
+            return OverlayRef.noop();
         }
+        const { template, appRef, configure, onClosed } = options;
+        const instance = this.createTemplateInstance(options, template, appRef ?? this.applicationRef);
+        this.pushInstance(instance);
+        this.renderHost(instance);
         this.attachGlobalListeners();
-        const element = this.createDialogElement();
-        const componentRef = viewContainerRef.createComponent(component);
-        if (componentRef.location.nativeElement) {
-            element.appendChild(componentRef.location.nativeElement);
+        instance.onClosed = onClosed;
+        const ref = new OverlayRef(instance.element, instance.cleanup, undefined, template);
+        configure?.(instance, ref);
+        this.scheduleInitialLayout(instance);
+        return ref;
+    }
+    closeAll() {
+        if (!this.isBrowser) {
+            return;
+        }
+        [...this.overlayStack].forEach((instance) => {
+            instance.cleanup();
+        });
+    }
+    // ---------------------------------------------------------------------------
+    // instance creation
+    // ---------------------------------------------------------------------------
+    createComponentInstance(options, component, viewContainerRef) {
+        const host = this.createHostElement(options);
+        const backdrop = this.createBackdropElement(options);
+        const element = this.createOverlayElement(options);
+        host.appendChild(backdrop);
+        host.appendChild(element);
+        let componentRef;
+        let attachedToAppRef = false;
+        if (viewContainerRef) {
+            componentRef = options.injector
+                ? viewContainerRef.createComponent(component, { injector: options.injector })
+                : viewContainerRef.createComponent(component);
         }
+        else {
+            // No host ViewContainerRef available (e.g. a global service opening an
+            // overlay outside of any component template) - create and attach the
+            // component directly against the application, like a root component.
+            componentRef = createComponent(component, {
+                environmentInjector: this.environmentInjector,
+                elementInjector: options.injector,
+            });
+            this.applicationRef.attachView(componentRef.hostView);
+            attachedToAppRef = true;
+        }
+        element.appendChild(componentRef.location.nativeElement);
         const instance = {
+            host,
+            backdrop,
             element,
-            anchor,
-            point,
-            placementConfig: this.resolvePlacementConfig(placement, alignment, margin),
+            anchor: options.anchor,
+            point: options.point,
+            placementConfig: this.resolvePlacementConfig(options.placement, options.alignment, options.margin),
+            usePopover: this.resolveUsePopover(options),
+            closeOnEscape: options.closeOnEscape ?? true,
+            closeOnOutsideClick: options.closeOnOutsideClick ?? true,
+            canClose: options.canClose,
+            autoFocus: options.autoFocus ?? true,
+            restoreFocus: options.restoreFocus ?? true,
+            lockBodyScroll: options.lockBodyScroll ?? false,
             componentRef,
-            onClosed,
+            attachedToAppRef,
+            previousActiveElement: this.getActiveElement(),
             rafId: null,
             focusTimeoutId: null,
             cleanup: () => { },
         };
         instance.cleanup = () => this.destroyInstance(instance);
-        this.overlayStacks.push(instance);
-        element.showModal();
-        const ref = new OverlayRef(element, instance.cleanup, componentRef);
-        configure?.(componentRef.instance, ref);
-        this.scheduleInitialLayout(instance);
-        return ref;
-    }
-    openTemplate(options) {
-        const { anchor, point, template, appRef, configure, onClosed, placement, alignment, margin } = options;
-        this.attachGlobalListeners();
-        const element = this.createDialogElement();
+        return instance;
+    }
+    createTemplateInstance(options, template, appRef) {
+        const host = this.createHostElement(options);
+        const backdrop = this.createBackdropElement(options);
+        const element = this.createOverlayElement(options);
+        host.appendChild(backdrop);
+        host.appendChild(element);
         const view = template.createEmbeddedView({});
         appRef.attachView(view);
         element.append(...view.rootNodes);
         const instance = {
+            host,
+            backdrop,
             element,
-            anchor,
-            point,
-            placementConfig: this.resolvePlacementConfig(placement, alignment, margin),
+            anchor: options.anchor,
+            point: options.point,
+            placementConfig: this.resolvePlacementConfig(options.placement, options.alignment, options.margin),
+            usePopover: this.resolveUsePopover(options),
+            closeOnEscape: options.closeOnEscape ?? true,
+            closeOnOutsideClick: options.closeOnOutsideClick ?? true,
+            canClose: options.canClose,
+            autoFocus: options.autoFocus ?? true,
+            restoreFocus: options.restoreFocus ?? true,
+            lockBodyScroll: options.lockBodyScroll ?? false,
             embeddedView: view,
             appRef,
-            onClosed,
+            previousActiveElement: this.getActiveElement(),
             rafId: null,
             focusTimeoutId: null,
             cleanup: () => { },
         };
         instance.cleanup = () => this.destroyInstance(instance);
-        this.overlayStacks.push(instance);
-        element.showModal();
-        const ref = new OverlayRef(element, instance.cleanup, undefined, template);
-        configure?.(instance, ref);
-        this.scheduleInitialLayout(instance);
-        return ref;
-    }
-    closeAll() {
-        // اسنپ‌شات می‌گیریم چون cleanup حین اجرا آرایه‌ی اصلی رو تغییر می‌ده
-        [...this.overlayStacks].forEach((instance) => instance.cleanup());
-    }
-    // ---------------------------------------------------------------------
-    // lifecycle
-    // ---------------------------------------------------------------------
-    resolvePlacementConfig(placement, alignment, margin) {
-        return {
-            placement: placement ?? 'auto',
-            alignment: alignment ?? 'start',
-            margin: margin ?? 8,
-        };
+        return instance;
+    }
+    pushInstance(instance) {
+        this.overlayStack.push(instance);
+        // Only matters as a fallback for browsers without the Popover API -
+        // real popovers stack by top-layer show order regardless of z-index.
+        instance.host.style.zIndex = String(BASE_Z_INDEX + this.overlayStack.length);
+        if (instance.lockBodyScroll) {
+            this.lockBodyScroll();
+        }
     }
-    createDialogElement() {
-        const element = this.doc.createElement('dialog');
+    // ---------------------------------------------------------------------------
+    // DOM
+    // ---------------------------------------------------------------------------
+    createHostElement(options) {
+        const usePopover = this.resolveUsePopover(options);
+        const host = this.document.createElement('div');
+        host.className = OVERLAY_HOST_CLASSNAME;
+        host.setAttribute('data-ngx-overlay', '');
+        host.style.position = 'fixed';
+        host.style.inset = '0';
+        // Neutralize the browser's default `[popover]` UA stylesheet
+        // (margin: auto; width/height: fit-content; border: solid; padding: .25em;
+        // background: Canvas; overflow: auto) so the host reliably fills the
+        // viewport whether or not it ends up being a real popover.
+        host.style.margin = '0';
+        host.style.padding = '0';
+        host.style.border = 'none';
+        host.style.width = '100%';
+        host.style.height = '100%';
+        host.style.maxWidth = 'none';
+        host.style.maxHeight = 'none';
+        host.style.overflow = 'visible';
+        host.style.background = 'transparent';
+        host.style.color = 'inherit';
+        host.style.zIndex = String(BASE_Z_INDEX);
+        host.style.pointerEvents = 'auto';
+        // Popover goes on the ROOT element, not the inner panel. This puts the
+        // whole overlay (backdrop + panel) in the top layer as a single unit,
+        // so stacking "just works" above everything on the page - including
+        // ancestors with `overflow: hidden`, `transform`, or their own z-index
+        // stacking contexts, which regular `position: fixed` cannot escape.
+        // The inner `element` stays a normal `position: fixed` div and keeps
+        // computing against the viewport, so all the placement math is unchanged.
+        if (usePopover) {
+            host.setAttribute('popover', 'manual');
+        }
+        return host;
+    }
+    createBackdropElement(options) {
+        const backdrop = this.document.createElement('div');
+        backdrop.className = 'ngx-ui-overlay-backdrop';
+        backdrop.style.position = 'absolute';
+        backdrop.style.inset = '0';
+        backdrop.style.pointerEvents = 'auto';
+        backdrop.style.background = 'transparent';
+        this.addClasses(backdrop, options.backdropClass);
+        return backdrop;
+    }
+    createOverlayElement(options) {
+        const element = this.document.createElement('div');
         element.className = DIALOG_OVERLAY_CLASSNAME;
-        const style = element.style;
-        style.position = 'absolute';
-        style.outline = 'none';
-        style.padding = '0';
-        style.margin = '0';
-        style.border = 'none';
-        style.background = 'transparent';
-        style.maxWidth = '100vw';
-        style.maxHeight = '100vh';
-        style.overflow = 'visible';
-        style.visibility = 'hidden';
-        this.doc.body.appendChild(element);
+        element.setAttribute('role', options.role ?? 'dialog');
+        if (options.ariaModal ?? true) {
+            element.setAttribute('aria-modal', 'true');
+        }
+        if (options.ariaLabel) {
+            element.setAttribute('aria-label', options.ariaLabel);
+        }
+        if (options.ariaLabelledby) {
+            element.setAttribute('aria-labelledby', options.ariaLabelledby);
+        }
+        if (options.ariaDescribedby) {
+            element.setAttribute('aria-describedby', options.ariaDescribedby);
+        }
+        element.setAttribute('tabindex', '-1');
+        element.style.position = 'fixed';
+        element.style.pointerEvents = 'auto';
+        element.style.boxSizing = 'border-box';
+        element.style.maxWidth = '100dvw'; // 'calc(100vw - 16px)';
+        element.style.maxHeight = '100dvh'; // 'calc(100vh - 16px)';
+        element.style.outline = 'none';
+        element.style.border = 'none';
+        element.style.padding = '0';
+        element.style.margin = '0';
+        element.style.overflow = 'auto';
+        element.style.transformOrigin = 'left top';
+        element.style.background = 'none';
+        element.style.boxShadow = '0 0 20px light-dark(#79797955, #020202bd)';
+        element.style.borderRadius = 'var(--ngx-dialog-corner-radius,1rem)';
+        this.addClasses(element, options.panelClass);
         return element;
     }
-    scheduleInitialLayout(instance) {
-        instance.rafId = requestAnimationFrame(() => {
-            instance.rafId = null;
-            this.positionDialog(instance);
-        });
-        instance.focusTimeoutId = setTimeout(() => {
-            instance.focusTimeoutId = null;
-            const focusable = instance.element.querySelector(FOCUSABLE_SELECTOR);
-            focusable?.focus();
-        }, 0);
+    addClasses(element, classes) {
+        if (!classes) {
+            return;
+        }
+        const list = Array.isArray(classes) ? classes : classes.split(' ');
+        for (const c of list) {
+            if (c.trim()) {
+                element.classList.add(c.trim());
+            }
+        }
     }
+    renderHost(instance) {
+        this.document.body.appendChild(instance.host);
+        // Must show the popover (enter the top layer) BEFORE we ever measure
+        // `instance.element`'s rect - while a popover host is closed it's
+        // `display: none`, and everything inside it (including the panel)
+        // would measure as a 0x0 box.
+        this.showHostPopover(instance);
+        instance.element.style.visibility = 'hidden';
+        instance.element.style.position = 'fixed';
+        instance.element.style.top = '0';
+        instance.element.style.left = '0';
+    }
+    // ---------------------------------------------------------------------------
+    // lifecycle
+    // ---------------------------------------------------------------------------
     destroyInstance(instance) {
-        const index = this.overlayStacks.indexOf(instance);
-        if (index === -1)
-            return; // جلوگیری از پاک‌سازی دوباره
-        this.overlayStacks.splice(index, 1);
-        // لغو کارهای زمان‌بندی‌شده‌ای که هنوز اجرا نشدن (نشتی حافظه در نسخه‌ی قبلی)
-        if (instance.rafId !== null)
-            cancelAnimationFrame(instance.rafId);
-        if (instance.focusTimeoutId !== null)
+        const index = this.overlayStack.indexOf(instance);
+        if (index === -1) {
+            return;
+        }
+        this.overlayStack.splice(index, 1);
+        if (instance.rafId !== null) {
+            this.cancelAnimationFrame(instance.rafId);
+            instance.rafId = null;
+        }
+        if (instance.focusTimeoutId !== null) {
             clearTimeout(instance.focusTimeoutId);
+            instance.focusTimeoutId = null;
+        }
         if (instance.componentRef) {
-            instance.componentRef.location.nativeElement?.remove();
+            if (instance.attachedToAppRef) {
+                this.applicationRef.detachView(instance.componentRef.hostView);
+            }
             instance.componentRef.destroy();
+            instance.componentRef = undefined;
         }
         if (instance.embeddedView && instance.appRef) {
             instance.appRef.detachView(instance.embeddedView);
             instance.embeddedView.destroy();
+            instance.embeddedView = undefined;
+        }
+        this.hideHostPopover(instance);
+        instance.host.remove();
+        if (instance.lockBodyScroll) {
+            this.unlockBodyScroll();
+        }
+        instance.onClosed?.();
+        // Only tear down the shared/global listeners once *every* overlay is
+        // closed - previously this ran unconditionally on every close, which
+        // silently broke Escape/outside-click/reposition for any overlays that
+        // were still open underneath.
+        if (this.overlayStack.length === 0) {
+            this.detachGlobalListeners();
+        }
+        if (instance.restoreFocus) {
+            this.restoreFocus(instance.previousActiveElement);
+        }
+    }
+    // ---------------------------------------------------------------------------
+    // popover helpers
+    // ---------------------------------------------------------------------------
+    resolveUsePopover(options) {
+        return (options.usePopover ?? true) && this.supportsPopover();
+    }
+    showHostPopover(instance) {
+        if (!instance.usePopover) {
+            return;
         }
-        // قبل از remove()، دیالوگ رو با متد استاندارد close() می‌بندیم؛ این کار دو
-        // فایده داره که با remove() ساده به دست نمی‌اومدن:
-        // ۱) فوکوس به‌صورت خودکار به همون المنتی که قبل از باز شدن دیالوگ فوکوس
-        //    داشت برمی‌گرده (رفتار استاندارد close() روی <dialog>) — با remove()
-        //    ساده این اتفاق نمی‌افته و فوکوس معمولاً روی body گم می‌شه.
-        // ۲) رویداد 'close' استاندارد شلیک می‌شه، برای کدی که ممکنه به اون گوش بده.
-        // در try/catch گذاشتیمش چون در محیط تست (jsdom) این متدها mock هستن و ممکنه
-        // رفتار متفاوتی داشته باشن.
         try {
-            if (instance.element.open)
-                instance.element.close();
+            instance.host.showPopover();
         }
         catch {
-            /* noop */
+            // Already open, or environment doesn't fully support it - ignore.
         }
-        instance.element.remove();
-        instance.onClosed?.();
     }
-    // ---------------------------------------------------------------------
-    // global listeners (فقط یک‌بار در کل عمر سرویس attach می‌شن)
-    // ---------------------------------------------------------------------
+    hideHostPopover(instance) {
+        if (!instance.usePopover) {
+            return;
+        }
+        try {
+            if (instance.host.matches(':popover-open')) {
+                instance.host.hidePopover();
+            }
+        }
+        catch {
+            // Not open, or already removed from the DOM - ignore.
+        }
+    }
+    supportsPopover() {
+        return (typeof HTMLElement !== 'undefined' &&
+            'popover' in HTMLElement.prototype &&
+            typeof HTMLElement.prototype.showPopover === 'function' &&
+            typeof HTMLElement.prototype.hidePopover === 'function');
+    }
+    // ---------------------------------------------------------------------------
+    // body scroll lock
+    // ---------------------------------------------------------------------------
+    lockBodyScroll() {
+        this.bodyScrollLockCount++;
+        if (this.bodyScrollLockCount > 1) {
+            return;
+        }
+        const body = this.document.body;
+        this.previousBodyOverflow = body.style.overflow;
+        this.previousBodyPaddingRight = body.style.paddingRight;
+        const scrollbarWidth = window.innerWidth - this.document.documentElement.clientWidth;
+        body.style.overflow = 'hidden';
+        if (scrollbarWidth > 0) {
+            const currentPaddingRight = parseFloat(window.getComputedStyle(body).paddingRight) || 0;
+            body.style.paddingRight = `${currentPaddingRight + scrollbarWidth}px`;
+        }
+    }
+    unlockBodyScroll() {
+        if (this.bodyScrollLockCount === 0) {
+            return;
+        }
+        this.bodyScrollLockCount--;
+        if (this.bodyScrollLockCount > 0) {
+            return;
+        }
+        const body = this.document.body;
+        body.style.overflow = this.previousBodyOverflow ?? '';
+        body.style.paddingRight = this.previousBodyPaddingRight ?? '';
+        this.previousBodyOverflow = null;
+        this.previousBodyPaddingRight = null;
+    }
+    // ---------------------------------------------------------------------------
+    // global listeners
+    // ---------------------------------------------------------------------------
     attachGlobalListeners() {
-        if (this.listenersAttached)
+        if (!this.isBrowser || this.globalListenersAttached) {
             return;
-        this.listenersAttached = true;
-        const { signal } = this.abortController;
-        this.doc.addEventListener('keydown', this.onGlobalKeyDown, { signal });
-        window.addEventListener('resize', this.onGlobalResize, { signal, passive: true });
-        this.doc.addEventListener('click', this.onGlobalPointerEvent, { signal });
-        this.doc.addEventListener('contextmenu', this.onGlobalPointerEvent, { signal });
-    }
-    onGlobalKeyDown = (e) => {
-        if (e.key !== 'Escape')
+        }
+        // Flip the flag synchronously to avoid a race: if two overlays open in
+        // the same tick, the second call must see the flag already set instead
+        // of scheduling a second (duplicate) round of addEventListener calls.
+        this.globalListenersAttached = true;
+        setTimeout(() => {
+            this.document.addEventListener('keydown', this.onDocumentKeydown);
+            this.document.addEventListener('click', this.onDocumentClick);
+            this.document.addEventListener('contextmenu', this.onDocumentContextMenu);
+            this.document.addEventListener('scroll', this.onDocumentScroll, true);
+            window.addEventListener('resize', this.onWindowResize);
+        }, 0);
+    }
+    detachGlobalListeners() {
+        if (!this.isBrowser || !this.globalListenersAttached) {
             return;
-        this.getLastDialog()?.cleanup();
-    };
-    onGlobalResize = () => {
-        // چند رویداد resize پشت‌سرهم فقط یک reposition واقعی اجرا می‌کنن
-        if (this.resizeRafPending)
+        }
+        this.globalListenersAttached = false;
+        this.document.removeEventListener('keydown', this.onDocumentKeydown);
+        this.document.removeEventListener('click', this.onDocumentClick);
+        this.document.removeEventListener('contextmenu', this.onDocumentContextMenu);
+        this.document.removeEventListener('scroll', this.onDocumentScroll, true);
+        window.removeEventListener('resize', this.onWindowResize);
+    }
+    onDocumentKeydown = (event) => {
+        const instance = this.getLastInstance();
+        if (!instance) {
             return;
-        this.resizeRafPending = true;
-        requestAnimationFrame(() => {
-            this.resizeRafPending = false;
-            this.repositionAll();
-        });
+        }
+        if (event.key === 'Escape') {
+            if (!instance.closeOnEscape || (instance.canClose && !instance.canClose())) {
+                return;
+            }
+            event.preventDefault();
+            instance.cleanup();
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event, instance);
+        }
     };
-    onGlobalPointerEvent = (e) => {
-        this.handleClickOnBackdrop(e);
+    onDocumentClick = (event) => {
+        const instance = this.getLastInstance();
+        if (!instance) {
+            return;
+        }
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        if (instance.element.contains(target)) {
+            return;
+        }
+        if (instance.anchor && instance.anchor.contains(target)) {
+            return;
+        }
+        if (!instance.closeOnOutsideClick || (instance.canClose && !instance.canClose())) {
+            return;
+        }
+        if (event.target !== instance.backdrop) {
+            return;
+        }
+        instance.cleanup();
     };
-    handleClickOnBackdrop(event) {
-        const lastDialog = this.getLastDialog();
-        if (!lastDialog || !lastDialog.element.open)
+    onDocumentContextMenu = (event) => {
+        const instance = this.getLastInstance();
+        if (!instance) {
             return;
-        // کلیک باید دقیقاً روی خودِ دیالوگ (بک‌دراپ) باشه، نه محتوای داخلش
-        if (event.target !== lastDialog.element)
+        }
+        if (instance.point && instance.anchor && instance.anchor.contains(event.target)) {
+            event.preventDefault();
+            instance.point = {
+                x: event.clientX,
+                y: event.clientY,
+            };
+            this.scheduleReposition();
             return;
-        // اگه فرم داخل دیالوگه، با کلیک بیرون بسته نشه
-        if (lastDialog.element.querySelector('form'))
+        }
+        if (instance.element.contains(event.target)) {
             return;
-        const rect = lastDialog.element.getBoundingClientRect();
-        const clickWasInsideDialog = rect.top <= event.clientY &&
-            event.clientY <= rect.bottom &&
-            rect.left <= event.clientX &&
-            event.clientX <= rect.right;
-        const anchRect = lastDialog.anchor.getBoundingClientRect();
-        const clickWasInsideAnchor = anchRect.top <= event.clientY &&
-            event.clientY <= anchRect.bottom &&
-            anchRect.left <= event.clientX &&
-            event.clientX <= anchRect.right;
-        if (!clickWasInsideDialog) {
-            if (event.type == 'contextmenu' && lastDialog.point && clickWasInsideAnchor) {
-                event.preventDefault();
-                lastDialog.point = {
-                    x: event.clientX,
-                    y: event.clientY,
-                };
-                this.positionDialog(lastDialog);
-            }
-            else {
-                lastDialog.cleanup();
-            }
         }
+        if (!instance.closeOnOutsideClick || (instance.canClose && !instance.canClose())) {
+            return;
+        }
+        if (event.target !== instance.backdrop) {
+            return;
+        }
+        instance.cleanup();
+    };
+    onDocumentScroll = () => {
+        this.scheduleReposition();
+    };
+    onWindowResize = () => {
+        this.scheduleReposition();
+    };
+    scheduleReposition() {
+        if (this.layoutRaf !== null) {
+            return;
+        }
+        this.layoutRaf = this.requestAnimationFrame(() => {
+            this.layoutRaf = null;
+            const instances = [...this.overlayStack];
+            for (const instance of instances) {
+                this.positionOverlay(instance);
+            }
+        });
     }
-    getLastDialog() {
-        return this.overlayStacks[this.overlayStacks.length - 1];
-    }
-    // ---------------------------------------------------------------------
-    // positioning
-    // ---------------------------------------------------------------------
-    repositionAll() {
-        this.overlayStacks.forEach((instance) => {
-            if (instance.element.isConnected) {
-                this.positionDialog(instance);
+    // ---------------------------------------------------------------------------
+    // focus
+    // ---------------------------------------------------------------------------
+    scheduleInitialLayout(instance) {
+        instance.rafId = this.requestAnimationFrame(() => {
+            instance.rafId = null;
+            this.positionOverlay(instance);
+            if (!instance.autoFocus) {
+                return;
             }
+            instance.focusTimeoutId = setTimeout(() => {
+                instance.focusTimeoutId = null;
+                this.focusInitialElement(instance);
+            }, 0);
         });
     }
-    positionDialog(instance) {
-        const { anchor, element: dialog, placementConfig, point } = instance;
-        const { placement, alignment, margin } = placementConfig;
-        if (!dialog.isConnected)
+    focusInitialElement(instance) {
+        const focusable = instance.element.querySelector(FOCUSABLE_SELECTOR);
+        focusable?.focus() ?? instance.element.focus();
+    }
+    trapFocus(event, instance) {
+        const elements = Array.from(instance.element.querySelectorAll(FOCUSABLE_SELECTOR));
+        if (!elements.length) {
+            event.preventDefault();
+            instance.element.focus();
             return;
-        let anchorRect;
-        if (point) {
-            anchorRect = new DOMRect(point.x, point.y, 0, 0);
         }
-        else {
-            anchorRect = anchor.getBoundingClientRect();
+        const first = elements[0];
+        const last = elements[elements.length - 1];
+        const active = this.getActiveElement();
+        if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+            return;
         }
-        const dialogRect = dialog.getBoundingClientRect();
-        const vw = Math.min(document.body.clientWidth, window.innerWidth);
-        const vh = Math.min(document.body.clientHeight, window.innerHeight);
-        const isRTL = this.directionService.isRtl();
-        let top = 0;
-        let left = 'auto';
-        let right = 'auto';
-        const spaceBelow = vh - anchorRect.bottom;
-        const spaceAbove = anchorRect.top;
-        let verticalPos = 'above';
-        if (placement === 'bottom' ||
-            (placement === 'auto' && spaceBelow >= dialogRect.height + margin)) {
-            top = anchorRect.bottom + margin;
-            verticalPos = 'above';
-            if (top + dialogRect.height > vh - margin) {
-                top = vh - dialogRect.height - margin;
-                verticalPos = 'bottom';
-            }
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
         }
-        else {
-            top = anchorRect.top - dialogRect.height - margin;
-            verticalPos = 'bottom';
-            if (top > spaceAbove) {
-                top = anchorRect.top + anchorRect.height + margin;
-                verticalPos = 'above';
-            }
+    }
+    restoreFocus(element) {
+        if (element && element.isConnected) {
+            setTimeout(() => {
+                element.focus();
+            }, 0);
         }
-        if (alignment === 'center') {
-            left = anchorRect.left + anchorRect.width / 2 - dialogRect.width / 2;
+    }
+    getActiveElement() {
+        const active = this.document.activeElement;
+        return active instanceof HTMLElement ? active : null;
+    }
+    // ---------------------------------------------------------------------------
+    // positioning
+    // ---------------------------------------------------------------------------
+    positionOverlay(instance) {
+        if (!instance.host.isConnected || !instance.element.isConnected) {
+            return;
         }
-        else if (alignment === 'start') {
-            if (isRTL) {
-                right = vw - anchorRect.right;
-            }
-            else {
-                left = anchorRect.left;
-            }
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const anchorRect = this.getAnchorRect(instance);
+        const overlay = instance.element;
+        const overlayRect = overlay.getBoundingClientRect();
+        const { placement, alignment, margin } = instance.placementConfig;
+        const isRTL = this.directionService.isRtl();
+        let top;
+        if (placement === 'center') {
+            top = anchorRect.top + anchorRect.height / 2 - overlayRect.height / 2;
         }
-        else if (alignment === 'end') {
-            // انتهای دیالوگ باید با انتهای anchor یکی باشه؛ با استفاده از پراپرتی
-            // CSS «right» (به‌جای کم‌کردن دستیِ عرض از «left») این کار درست و مستقل
-            // از این‌که عرض دیالوگ چقدره انجام می‌شه (قبلاً این خط باگ داشت و دیالوگ
-            // رو بعد از anchor می‌ذاشت، نه هم‌تراز با لبه‌ی انتهاییِ آن).
-            if (isRTL) {
-                left = anchorRect.left;
+        else {
+            const spaceBelow = viewportHeight - anchorRect.bottom;
+            const placeBelow = placement === 'bottom' ||
+                (placement === 'auto' && spaceBelow >= overlayRect.height + margin);
+            if (placeBelow) {
+                top = anchorRect.bottom + margin;
             }
             else {
-                right = vw - anchorRect.right;
+                top = anchorRect.top - overlayRect.height - margin;
             }
+            overlay.classList.toggle('tips-below', placeBelow);
+            overlay.classList.toggle('tips-above', !placeBelow);
+        }
+        if (top + overlayRect.height > viewportHeight - margin) {
+            top = viewportHeight - overlayRect.height - margin;
         }
-        if (left !== 'auto') {
-            left = Math.min(Math.max(left, margin), vw - dialogRect.width - margin);
+        if (top < margin) {
+            top = margin;
+        }
+        let left;
+        switch (alignment) {
+            case 'center':
+                left = anchorRect.left + anchorRect.width / 2 - overlayRect.width / 2;
+                break;
+            case 'end':
+                left = isRTL ? anchorRect.left : anchorRect.right - overlayRect.width;
+                break;
+            case 'start':
+            default:
+                left = isRTL ? anchorRect.right - overlayRect.width : anchorRect.left;
+                break;
+        }
+        left = Math.min(Math.max(left, margin), Math.max(margin, viewportWidth - overlayRect.width - margin));
+        overlay.style.top = `${Math.round(top)}px`;
+        overlay.style.left = `${Math.round(left)}px`;
+        overlay.style.right = 'auto';
+        overlay.style.bottom = 'auto';
+        overlay.style.visibility = 'visible';
+        // NOTE: showPopover() is intentionally NOT called here. It already
+        // happened once in renderHost(); calling it again on every reposition
+        // (scroll/resize) throws InvalidStateError since the popover is
+        // already open.
+    }
+    getAnchorRect(instance) {
+        if (instance.point) {
+            return new DOMRect(instance.point.x, instance.point.y, 0, 0);
+        }
+        if (instance.anchor && instance.anchor.isConnected) {
+            return instance.anchor.getBoundingClientRect();
+        }
+        return new DOMRect(window.innerWidth / 2, window.innerHeight / 2, 0, 0);
+    }
+    resolvePlacementConfig(placement, alignment, margin) {
+        return {
+            placement: placement ?? 'auto',
+            alignment: alignment ?? 'start',
+            margin: margin ?? 8,
+        };
+    }
+    // ---------------------------------------------------------------------------
+    // utilities
+    // ---------------------------------------------------------------------------
+    getLastInstance() {
+        return this.overlayStack[this.overlayStack.length - 1];
+    }
+    requestAnimationFrame(callback) {
+        if (typeof window.requestAnimationFrame === 'function') {
+            return window.requestAnimationFrame(callback);
         }
-        if (right !== 'auto') {
-            right = Math.min(Math.max(right, margin), vw - dialogRect.width - margin);
+        return window.setTimeout(() => callback(Date.now()), 16);
+    }
+    cancelAnimationFrame(id) {
+        if (typeof window.cancelAnimationFrame === 'function') {
+            window.cancelAnimationFrame(id);
         }
-        if (top < 0) {
-            top = 0;
+        else {
+            clearTimeout(id);
         }
-        dialog.className = `${DIALOG_OVERLAY_CLASSNAME} tips-${verticalPos}`;
-        dialog.style.top = `${top + window.scrollY}px`;
-        dialog.style.left = left !== 'auto' ? `${left + window.scrollX}px` : 'auto';
-        dialog.style.right = right !== 'auto' ? `${right + window.scrollX}px` : 'auto';
-        dialog.style.transformOrigin = verticalPos == 'above' ? 'left top' : 'left bottom';
-        // dialog.style.transform = 'none';
-        dialog.style.visibility = 'visible';
-        dialog.style.animation = 'menu-enter 120ms cubic-bezier(0, 0, 0.2, 1)';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OverlayService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BrowserService, DIALOG_OVERLAY_CLASSNAME, DirectionService, FOCUSABLE_SELECTOR, OverlayRef, OverlayService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, WINDOW, filterTreeList, generateSequentialGuid, getOffsetPosition, makeConfetti, mergeConfig, mergeDeep, randomStrnig, startDragSession };
-//# sourceMappingURL=ngx-kit-shared.mjs.map
+export { BrowserService, CSS_COLOR_NAMES, DIALOG_OVERLAY_CLASSNAME, DirectionService, FOCUSABLE_SELECTOR, OVERLAY_HOST_CLASSNAME, OverlayRef, OverlayService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, WINDOW, extractCssColors, filterTreeList, generateSequentialGuid, getOffsetPosition, makeConfetti, mergeDeep, randomStrnig, startDragSession };
+//# sourceMappingURL=ngx-kit-core.mjs.map