@flusys/ng-ui 8.1.2 → 8.1.3

package/fesm2022/flusys-ng-ui.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { signal, Service, makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, input, booleanAttribute, computed, Component, output, contentChild, viewChild, effect, ElementRef, Directive, numberAttribute, afterNextRender, TemplateRef, contentChildren, DestroyRef, untracked, forwardRef, model, viewChildren, Renderer2, InjectionToken, Injector, SecurityContext } from '@angular/core';
-import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgComponentOutlet } from '@angular/common';
+import { signal, Service, makeEnvironmentProviders, provideAppInitializer, inject, PLATFORM_ID, input, booleanAttribute, computed, Component, output, contentChild, viewChild, effect, DestroyRef, ElementRef, Directive, numberAttribute, afterNextRender, TemplateRef, contentChildren, untracked, forwardRef, model, viewChildren, Renderer2, InjectionToken, Injector, SecurityContext } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import * as lucideNamespace from '@lucide/angular';
 import { isLucideIconComponent, LucideDynamicIcon, provideLucideIcons } from '@lucide/angular';
 import * as i1 from '@angular/forms';
@@ -730,6 +730,34 @@ function provideNgUI(options) {
     ]);
 }
 
+const BASE_Z_INDEX = 1000;
+const Z_INDEX_STEP = 2;
+class OverlayStackService {
+    _doc = inject(DOCUMENT);
+    nextZIndex = BASE_Z_INDEX;
+    lockCount = 0;
+    open() {
+        const zIndex = this.nextZIndex;
+        this.nextZIndex += Z_INDEX_STEP;
+        return zIndex;
+    }
+    lockScroll() {
+        if (this.lockCount === 0)
+            this._doc.body.style.overflow = 'hidden';
+        this.lockCount++;
+    }
+    unlockScroll() {
+        this.lockCount = Math.max(0, this.lockCount - 1);
+        if (this.lockCount === 0)
+            this._doc.body.style.overflow = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: OverlayStackService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.5", ngImport: i0, type: OverlayStackService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: OverlayStackService, decorators: [{
+            type: Service
+        }] });
+
 class BadgeComponent {
     value = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -1312,10 +1340,10 @@ function plainVariant(kind) {
 const FOCUSABLE_SELECTOR$3 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 class ConfirmDialog {
     static idCounter = 0;
-    _doc = inject(DOCUMENT);
     headerId = `f-confirmdialog-header-${++ConfirmDialog.idCounter}`;
     descId = `f-confirmdialog-desc-${ConfirmDialog.idCounter}`;
     confirmationService = inject(ConfirmationService);
+    _overlayStack = inject(OverlayStackService);
     key = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
     icon = input('', /* @ts-ignore */
@@ -1350,24 +1378,40 @@ class ConfirmDialog {
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     _previouslyFocused = null;
+    _scrollLocked = false;
+    _zIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_zIndex" }] : /* istanbul ignore next */ []));
+    zIndex = this._zIndex.asReadonly();
     constructor() {
         effect(() => {
             const visible = !!this.activeConfirmation();
             if (visible) {
+                this._zIndex.set(this._overlayStack.open());
                 this._previouslyFocused =
                     typeof document !== 'undefined'
                         ? document.activeElement
                         : null;
-                if (this.blockScroll())
-                    this._doc.body.style.overflow = 'hidden';
+                if (this.blockScroll()) {
+                    this._overlayStack.lockScroll();
+                    this._scrollLocked = true;
+                }
             }
             else {
-                if (this.blockScroll())
-                    this._doc.body.style.overflow = '';
+                this._zIndex.set(null);
+                if (this._scrollLocked) {
+                    this._overlayStack.unlockScroll();
+                    this._scrollLocked = false;
+                }
                 this._previouslyFocused?.focus();
                 this._previouslyFocused = null;
             }
         });
+        inject(DestroyRef).onDestroy(() => {
+            if (this._scrollLocked) {
+                this._overlayStack.unlockScroll();
+                this._scrollLocked = false;
+            }
+        });
     }
     resolvedIcon(c) {
         return c.icon || this.icon();
@@ -1426,7 +1470,10 @@ class ConfirmDialog {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ConfirmDialog, isStandalone: true, selector: "f-confirmdialog", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, acceptLabel: { classPropertyName: "acceptLabel", publicName: "acceptLabel", isSignal: true, isRequired: false, transformFunction: null }, rejectLabel: { classPropertyName: "rejectLabel", publicName: "rejectLabel", isSignal: true, isRequired: false, transformFunction: null }, acceptIcon: { classPropertyName: "acceptIcon", publicName: "acceptIcon", isSignal: true, isRequired: false, transformFunction: null }, rejectIcon: { classPropertyName: "rejectIcon", publicName: "rejectIcon", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonStyleClass: { classPropertyName: "acceptButtonStyleClass", publicName: "acceptButtonStyleClass", isSignal: true, isRequired: false, transformFunction: null }, rejectButtonStyleClass: { classPropertyName: "rejectButtonStyleClass", publicName: "rejectButtonStyleClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, defaultFocus: { classPropertyName: "defaultFocus", publicName: "defaultFocus", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "block" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (activeConfirmation(); as c) {
       @if (c.acceptVisible !== false || c.rejectVisible !== false) {
-        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          class="fixed inset-0 flex items-center justify-center p-4"
+          [style.z-index]="zIndex()"
+        >
           <div
             class="confirm-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
             (click)="c.closable !== false && reject(c.reject)"
@@ -1517,7 +1564,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{ selector: 'f-confirmdialog', imports: [UiIconComponent, ButtonComponent], host: { class: 'block', '(document:keydown.escape)': 'onEscape()' }, template: `
     @if (activeConfirmation(); as c) {
       @if (c.acceptVisible !== false || c.rejectVisible !== false) {
-        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div
+          class="fixed inset-0 flex items-center justify-center p-4"
+          [style.z-index]="zIndex()"
+        >
           <div
             class="confirm-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
             (click)="c.closable !== false && reject(c.reject)"
@@ -2650,9 +2700,13 @@ class ImageComponent {
     ...(ngDevMode ? [{ debugName: "fTemplates" }] : /* istanbul ignore next */ []));
     indicatorTpl = computed(() => this.fTemplates().find(t => t.fTemplate() === 'indicator')?.templateRef ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "indicatorTpl" }] : /* istanbul ignore next */ []));
+    _overlayStack = inject(OverlayStackService);
     _previewVisible = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_previewVisible" }] : /* istanbul ignore next */ []));
     previewVisible = this._previewVisible.asReadonly();
+    _zIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_zIndex" }] : /* istanbul ignore next */ []));
+    zIndex = this._zIndex.asReadonly();
     _loaded = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_loaded" }] : /* istanbul ignore next */ []));
     loaded = this._loaded.asReadonly();
@@ -2675,12 +2729,14 @@ class ImageComponent {
         if (this.hasError())
             return;
         this._previewVisible.set(true);
+        this._zIndex.set(this._overlayStack.open());
         this.onShow.emit();
     }
     close() {
         this._previewVisible.set(false);
         this._rotate.set(0);
         this._scale.set(1);
+        this._zIndex.set(null);
         this.onHide.emit();
     }
     onEscape() {
@@ -2751,7 +2807,8 @@ class ImageComponent {
 
     @if (previewVisible()) {
       <div
-        class="image-preview-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6"
+        class="image-preview-overlay fixed inset-0 flex items-center justify-center bg-black/80 p-6"
+        [style.z-index]="zIndex()"
         (click)="close()"
       >
         <div class="absolute top-4 left-4 flex items-center gap-1" (click)="$event.stopPropagation()">
@@ -2837,7 +2894,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 
     @if (previewVisible()) {
       <div
-        class="image-preview-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-6"
+        class="image-preview-overlay fixed inset-0 flex items-center justify-center bg-black/80 p-6"
+        [style.z-index]="zIndex()"
         (click)="close()"
       >
         <div class="absolute top-4 left-4 flex items-center gap-1" (click)="$event.stopPropagation()">
@@ -9213,7 +9271,7 @@ const CLOSE_ANIMATION_MS$1 = 180;
 const FOCUSABLE_SELECTOR$2 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 class DialogComponent {
     static idCounter = 0;
-    _doc = inject(DOCUMENT);
+    _overlayStack = inject(OverlayStackService);
     headerId = `f-dialog-header-${++DialogComponent.idCounter}`;
     header = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
@@ -9332,9 +9390,13 @@ class DialogComponent {
     _closing = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_closing" }] : /* istanbul ignore next */ []));
     closing = this._closing.asReadonly();
+    _zIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_zIndex" }] : /* istanbul ignore next */ []));
+    zIndex = this._zIndex.asReadonly();
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     _previouslyFocused = null;
+    _scrollLocked = false;
     constructor() {
         if (typeof window !== 'undefined') {
             fromEvent(window, 'resize')
@@ -9346,19 +9408,24 @@ class DialogComponent {
             if (visible) {
                 this._closing.set(false);
                 this._rendered.set(true);
+                this._zIndex.set(this._overlayStack.open());
                 this._previouslyFocused =
                     typeof document !== 'undefined'
                         ? document.activeElement
                         : null;
-                if (this.modal() || this.blockScroll())
-                    this._doc.body.style.overflow = 'hidden';
+                if (this.modal() || this.blockScroll()) {
+                    this._overlayStack.lockScroll();
+                    this._scrollLocked = true;
+                }
                 this.onShow.emit();
                 setTimeout(() => this.focusPanel(), 0);
             }
             else if (this._rendered()) {
                 this._closing.set(true);
-                if (this.modal() || this.blockScroll())
-                    this._doc.body.style.overflow = '';
+                if (this._scrollLocked) {
+                    this._overlayStack.unlockScroll();
+                    this._scrollLocked = false;
+                }
                 if (this.returnFocusOnClose())
                     this._previouslyFocused?.focus();
                 this._previouslyFocused = null;
@@ -9368,9 +9435,16 @@ class DialogComponent {
                 setTimeout(() => {
                     this._rendered.set(false);
                     this._closing.set(false);
+                    this._zIndex.set(null);
                 }, CLOSE_ANIMATION_MS$1);
             }
         });
+        inject(DestroyRef).onDestroy(() => {
+            if (this._scrollLocked) {
+                this._overlayStack.unlockScroll();
+                this._scrollLocked = false;
+            }
+        });
     }
     onEscape() {
         if (this.visible() && this.closable() && this.closeOnEscape())
@@ -9488,7 +9562,8 @@ class DialogComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DialogComponent, isStandalone: true, selector: "f-dialog", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, returnFocusOnClose: { classPropertyName: "returnFocusOnClose", publicName: "returnFocusOnClose", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide", onMaximize: "onMaximize" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (rendered()) {
       <div
-        class="fixed inset-0 z-999 flex p-4"
+        class="fixed inset-0 flex p-4"
+        [style.z-index]="zIndex()"
         [class]="containerPositionClass()"
         [class.pointer-events-none]="!modal()"
       >
@@ -9579,7 +9654,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{ selector: 'f-dialog', imports: [NgTemplateOutlet, UiIconComponent], host: { '(document:keydown.escape)': 'onEscape()' }, template: `
     @if (rendered()) {
       <div
-        class="fixed inset-0 z-999 flex p-4"
+        class="fixed inset-0 flex p-4"
+        [style.z-index]="zIndex()"
         [class]="containerPositionClass()"
         [class.pointer-events-none]="!modal()"
       >
@@ -9670,7 +9746,7 @@ const CLOSE_ANIMATION_MS = 200;
 const FOCUSABLE_SELECTOR$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 class DrawerComponent {
     static idCounter = 0;
-    _doc = inject(DOCUMENT);
+    _overlayStack = inject(OverlayStackService);
     headerId = `f-drawer-header-${++DrawerComponent.idCounter}`;
     header = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
@@ -9743,36 +9819,52 @@ class DrawerComponent {
     _closing = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_closing" }] : /* istanbul ignore next */ []));
     closing = this._closing.asReadonly();
+    _zIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_zIndex" }] : /* istanbul ignore next */ []));
+    zIndex = this._zIndex.asReadonly();
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     _previouslyFocused = null;
+    _scrollLocked = false;
     constructor() {
         effect(() => {
             if (this.visible()) {
                 this._closing.set(false);
                 this._rendered.set(true);
+                this._zIndex.set(this._overlayStack.open());
                 this._previouslyFocused =
                     typeof document !== 'undefined'
                         ? document.activeElement
                         : null;
-                if (this.modal() && this.blockScroll())
-                    this._doc.body.style.overflow = 'hidden';
+                if (this.modal() && this.blockScroll()) {
+                    this._overlayStack.lockScroll();
+                    this._scrollLocked = true;
+                }
                 this.onShow.emit();
                 setTimeout(() => this.focusPanel(), 0);
             }
             else if (this._rendered()) {
                 this._closing.set(true);
-                if (this.modal() && this.blockScroll())
-                    this._doc.body.style.overflow = '';
+                if (this._scrollLocked) {
+                    this._overlayStack.unlockScroll();
+                    this._scrollLocked = false;
+                }
                 if (this.returnFocusOnClose())
                     this._previouslyFocused?.focus();
                 this._previouslyFocused = null;
                 setTimeout(() => {
                     this._rendered.set(false);
                     this._closing.set(false);
+                    this._zIndex.set(null);
                 }, CLOSE_ANIMATION_MS);
             }
         });
+        inject(DestroyRef).onDestroy(() => {
+            if (this._scrollLocked) {
+                this._overlayStack.unlockScroll();
+                this._scrollLocked = false;
+            }
+        });
     }
     onEscape() {
         if (this.visible() && this.closeOnEscape())
@@ -9821,7 +9913,8 @@ class DrawerComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DrawerComponent, isStandalone: true, selector: "f-drawer", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, dismissable: { classPropertyName: "dismissable", publicName: "dismissable", isSignal: true, isRequired: false, transformFunction: null }, blockScroll: { classPropertyName: "blockScroll", publicName: "blockScroll", isSignal: true, isRequired: false, transformFunction: null }, returnFocusOnClose: { classPropertyName: "returnFocusOnClose", publicName: "returnFocusOnClose", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "block" }, queries: [{ propertyName: "headerRef", first: true, predicate: ["header"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["footer"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (rendered()) {
       <div
-        class="fixed inset-0 z-999 flex"
+        class="fixed inset-0 flex"
+        [style.z-index]="zIndex()"
         [class.pointer-events-none]="!modal()"
       >
         @if (modal()) {
@@ -9889,7 +9982,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
             args: [{ selector: 'f-drawer', imports: [UiIconComponent, NgTemplateOutlet], host: { class: 'block', '(document:keydown.escape)': 'onEscape()' }, template: `
     @if (rendered()) {
       <div
-        class="fixed inset-0 z-999 flex"
+        class="fixed inset-0 flex"
+        [style.z-index]="zIndex()"
         [class.pointer-events-none]="!modal()"
       >
         @if (modal()) {
@@ -20678,8 +20772,12 @@ class SpeedDialComponent {
     onHide = output();
     onVisibleChange = output();
     _el = inject(ElementRef);
+    _overlayStack = inject(OverlayStackService);
     _toggleBtn = viewChild('toggleButton', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_toggleBtn" }] : /* istanbul ignore next */ []));
+    _maskZIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_maskZIndex" }] : /* istanbul ignore next */ []));
+    maskZIndex = this._maskZIndex.asReadonly();
     hostClass = computed(() => `relative inline-flex ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     effectiveRadius = computed(() => this.radius() || this.model().length * 20, /* @ts-ignore */
@@ -20749,6 +20847,8 @@ class SpeedDialComponent {
         if (this.visible() || this.disabled())
             return;
         this.visible.set(true);
+        if (this.mask())
+            this._maskZIndex.set(this._overlayStack.open());
         this.onVisibleChange.emit(true);
         this.onShow.emit();
     }
@@ -20756,6 +20856,7 @@ class SpeedDialComponent {
         if (!this.visible())
             return;
         this.visible.set(false);
+        this._maskZIndex.set(null);
         this.onVisibleChange.emit(false);
         this.onHide.emit();
     }
@@ -20818,7 +20919,8 @@ class SpeedDialComponent {
     </div>
     @if (mask() && visible()) {
       <div
-        class="fixed inset-0 z-999 bg-(--f-mask-background)"
+        class="fixed inset-0 bg-(--f-mask-background)"
+        [style.z-index]="maskZIndex()"
         (click)="hide()"
       ></div>
     }
@@ -20878,7 +20980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     </div>
     @if (mask() && visible()) {
       <div
-        class="fixed inset-0 z-999 bg-(--f-mask-background)"
+        class="fixed inset-0 bg-(--f-mask-background)"
+        [style.z-index]="maskZIndex()"
         (click)="hide()"
       ></div>
     }
@@ -22570,6 +22673,7 @@ class ConfirmPopupComponent {
     headerId = `f-confirmpopup-header-${++ConfirmPopupComponent.idCounter}`;
     descId = `f-confirmpopup-desc-${ConfirmPopupComponent.idCounter}`;
     confirmationService = inject(ConfirmationService);
+    _overlayStack = inject(OverlayStackService);
     key = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
     acceptLabel = input('', /* @ts-ignore */
@@ -22598,6 +22702,9 @@ class ConfirmPopupComponent {
     _left = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_left" }] : /* istanbul ignore next */ []));
     left = this._left.asReadonly();
+    _zIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_zIndex" }] : /* istanbul ignore next */ []));
+    zIndex = this._zIndex.asReadonly();
     panelRef = viewChild('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     activeConfirmation = computed(() => {
@@ -22611,11 +22718,15 @@ class ConfirmPopupComponent {
         effect(() => {
             const c = this.activeConfirmation();
             if (c?.target) {
+                this._zIndex.set(this._overlayStack.open());
                 this.position(c.target);
                 setTimeout(() => {
                     this.adjustForViewport(c.target);
                 }, 0);
             }
+            else {
+                this._zIndex.set(null);
+            }
         });
         if (typeof window !== 'undefined') {
             fromEvent(window, 'resize')
@@ -22717,11 +22828,12 @@ class ConfirmPopupComponent {
       @if (c.target) {
         <div
           #panel
-          class="confirmpopup-panel fixed z-50 w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-4"
+          class="confirmpopup-panel fixed w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-4"
           [class]="styleClass()"
           [style]="style()"
           [style.top.px]="top()"
           [style.left.px]="left()"
+          [style.z-index]="zIndex()"
           role="alertdialog"
           [attr.aria-labelledby]="c.header ? headerId : null"
           [attr.aria-describedby]="c.message ? descId : null"
@@ -22778,11 +22890,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       @if (c.target) {
         <div
           #panel
-          class="confirmpopup-panel fixed z-50 w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-4"
+          class="confirmpopup-panel fixed w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-4"
           [class]="styleClass()"
           [style]="style()"
           [style.top.px]="top()"
           [style.left.px]="left()"
+          [style.z-index]="zIndex()"
           role="alertdialog"
           [attr.aria-labelledby]="c.header ? headerId : null"
           [attr.aria-describedby]="c.message ? descId : null"
@@ -22833,10 +22946,14 @@ class DynamicDialogRef {
     _closeFn;
     _onClose = new Subject();
     onClose = this._onClose.asObservable();
+    _closed = false;
     constructor(_closeFn) {
         this._closeFn = _closeFn;
     }
     close(result) {
+        if (this._closed)
+            return;
+        this._closed = true;
         this._onClose.next(result);
         this._onClose.complete();
         this._closeFn(result);
@@ -22846,17 +22963,24 @@ const DYNAMIC_DIALOG_DATA = new InjectionToken('DYNAMIC_DIALOG_DATA');
 const DYNAMIC_DIALOG_REF = new InjectionToken('DYNAMIC_DIALOG_REF');
 class DynamicDialogService {
     static idCounter = 0;
+    _overlayStack = inject(OverlayStackService);
     _states = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_states" }] : /* istanbul ignore next */ []));
     states = this._states.asReadonly();
     open(component, config = {}) {
         const id = ++DynamicDialogService.idCounter;
+        const zIndex = this._overlayStack.open();
+        const isModal = config.modal !== false;
+        if (isModal)
+            this._overlayStack.lockScroll();
         const ref = new DynamicDialogRef(() => {
+            if (isModal)
+                this._overlayStack.unlockScroll();
             this._states.update((list) => list.filter((s) => s.id !== id));
         });
         this._states.update((list) => [
             ...list,
-            { id, component, config, ref: ref },
+            { id, component, config, ref: ref, zIndex },
         ]);
         return ref;
     }
@@ -22874,7 +22998,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 class DynamicDialogComponent {
     dialogService = inject(DynamicDialogService);
     _parentInjector = inject(Injector);
-    _doc = inject(DOCUMENT);
     injectorCache = new Map();
     constructor() {
         effect(() => {
@@ -22884,13 +23007,6 @@ class DynamicDialogComponent {
                     this.injectorCache.delete(id);
             }
         });
-        effect(() => {
-            const anyModal = this.dialogService.states().some((s) => s.config.modal !== false);
-            this._doc.body.style.overflow = anyModal ? 'hidden' : '';
-        });
-        inject(DestroyRef).onDestroy(() => {
-            this._doc.body.style.overflow = '';
-        });
     }
     childInjector(state) {
         let injector = this.injectorCache.get(state.id);
@@ -22929,8 +23045,8 @@ class DynamicDialogComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DynamicDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: DynamicDialogComponent, isStandalone: true, selector: "f-dynamicdialog", host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "block" }, ngImport: i0, template: `
-    @for (s of dialogService.states(); track s.id; let i = $index) {
-      <div class="fixed inset-0 flex items-center justify-center p-4" [class.pointer-events-none]="s.config.modal === false" [style.z-index]="40 + i * 2">
+    @for (s of dialogService.states(); track s.id) {
+      <div class="fixed inset-0 flex items-center justify-center p-4" [class.pointer-events-none]="s.config.modal === false" [style.z-index]="s.zIndex">
         @if (s.config.modal !== false) {
           <div
             class="dynamicdialog-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"
@@ -22975,8 +23091,8 @@ class DynamicDialogComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: DynamicDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'f-dynamicdialog', imports: [NgComponentOutlet, UiIconComponent], host: { class: 'block', '(document:keydown.escape)': 'onEscape()' }, template: `
-    @for (s of dialogService.states(); track s.id; let i = $index) {
-      <div class="fixed inset-0 flex items-center justify-center p-4" [class.pointer-events-none]="s.config.modal === false" [style.z-index]="40 + i * 2">
+    @for (s of dialogService.states(); track s.id) {
+      <div class="fixed inset-0 flex items-center justify-center p-4" [class.pointer-events-none]="s.config.modal === false" [style.z-index]="s.zIndex">
         @if (s.config.modal !== false) {
           <div
             class="dynamicdialog-backdrop absolute inset-0 bg-black/50 backdrop-blur-[2px]"