@shival99/z-ui 0.0.1 → 1.0.2

package/fesm2022/shival99-z-ui-components-z-modal.mjs

@@ -0,0 +1,722 @@
+import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import * as i1 from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, PortalModule, ComponentPortal } from '@angular/cdk/portal';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, InjectionToken, output, input, model, contentChild, viewChild, PLATFORM_ID, ElementRef, ViewContainerRef, ChangeDetectorRef, signal, computed, effect, ChangeDetectionStrategy, Component, EventEmitter, Inject, Injector, Injectable } from '@angular/core';
+import { zDetectBrowser, zMergeClasses } from '@shival99/z-ui/utils';
+import { cva } from 'class-variance-authority';
+import { ZContentTypePipe, ZSafeHtmlPipe } from '@shival99/z-ui/pipes';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';
+import { __decorate, __param, __metadata } from 'tslib';
+import { Subject, takeUntil, fromEvent, filter } from 'rxjs';
+
+class ZModalContentDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ZModalContentDirective, isStandalone: true, selector: "[z-modal-content], [zModalContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZModalContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-modal-content], [zModalContent]',
+                    standalone: true,
+                }]
+        }] });
+
+class ZModalFooterDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ZModalFooterDirective, isStandalone: true, selector: "[z-modal-footer], [zModalFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZModalFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-modal-footer], [zModalFooter]',
+                    standalone: true,
+                }]
+        }] });
+
+class ZModalHeaderDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: ZModalHeaderDirective, isStandalone: true, selector: "[z-modal-header], [zModalHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZModalHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-modal-header], [zModalHeader]',
+                    standalone: true,
+                }]
+        }] });
+
+const Z_MODAL_DATA = new InjectionToken('Z_MODAL_DATA');
+const Z_MODAL_ANIMATION_DURATION = 200;
+var ZModalTriggerAction;
+(function (ZModalTriggerAction) {
+    ZModalTriggerAction["CANCEL"] = "cancel";
+    ZModalTriggerAction["OK"] = "ok";
+})(ZModalTriggerAction || (ZModalTriggerAction = {}));
+const noopFun = () => { };
+/**
+ * Configuration options for z-modal component.
+ *
+ * @template T - The type of the content component
+ * @template U - The type of the data passed to the modal
+ */
+class ZModalOptions {
+    /** Icon for the cancel button */
+    zCancelIcon;
+    /** Text for the cancel button. Set to null to hide the button */
+    zCancelText;
+    /** Whether the modal is closable (shows close button) */
+    zClosable;
+    /** Confirm type for preset styling (show, info, warning, danger) */
+    zConfirmType;
+    /** Icon for the confirm modal */
+    zConfirmIcon;
+    /** Modal content - can be a component, template, or string */
+    zContent;
+    /** Custom CSS classes for the modal */
+    class;
+    /** Data to be passed to the content component via Z_MODAL_DATA token */
+    zData;
+    /**
+     * Observable for deferred data loading before showing modal content.
+     * Modal will show a loading spinner until the Observable completes.
+     * The resolved data will be available via Z_MODAL_DATA.
+     *
+     * @example
+     * ```typescript
+     * this.modalService.create({
+     *   zDefer: this.userService.getUser(userId),
+     *   zContent: UserFormComponent,
+     * });
+     * ```
+     */
+    zDefer;
+    /** Description text shown below the title */
+    zDescription;
+    /** Whether to hide the default footer */
+    zHideFooter;
+    /**
+     * WritableSignal to control loading state of the OK button.
+     * Use this when submitting forms or calling APIs.
+     *
+     * @example Using with confirm modal (delete action)
+     * ```typescript
+     * const modalRef = this.modalService.danger({
+     *   zTitle: 'Delete Item',
+     *   zContent: 'Are you sure you want to delete this item?',
+     *   zOkText: 'Delete',
+     *   zOnOk: () => {
+     *     modalRef.setLoading(true);
+     *     this.api.delete(itemId).subscribe({
+     *       next: () => {
+     *         modalRef.setLoading(false);
+     *         modalRef.close();
+     *       },
+     *       error: () => modalRef.setLoading(false),
+     *     });
+     *     return false; // Prevent auto-close
+     *   },
+     * });
+     * ```
+     */
+    zLoading;
+    /** Whether clicking mask closes the modal */
+    zMaskClosable;
+    /** Whether OK button has destructive (red) style */
+    zOkDestructive;
+    /** Whether OK button is disabled */
+    zOkDisabled;
+    /** Overlay style: 'dark' (black overlay) or 'blur' (backdrop blur) */
+    zOverlay;
+    /** Icon for the OK button */
+    zOkIcon;
+    /** Text for the OK button. Set to null to hide the button */
+    zOkText;
+    /** Callback or EventEmitter when cancel is clicked */
+    zOnCancel = noopFun;
+    /** Callback or EventEmitter when OK is clicked */
+    zOnOk = noopFun;
+    /** Modal title - supports string, HTML string, or TemplateRef */
+    zTitle;
+    /** ViewContainerRef for the modal portal */
+    zViewContainerRef;
+    /** Modal width (e.g., '425px', '80%') */
+    zWidth;
+    /** WritableSignal to control content loading state (shows skeleton when true) */
+    zContentLoading;
+    /** Number of skeleton rows to show when content is loading */
+    zSkeletonRows;
+}
+
+const getOverlayType = () => {
+    const browser = zDetectBrowser();
+    return browser.name === 'Chrome' ? 'dark' : 'blur';
+};
+const Z_MODAL_CONFIRM_CONFIG = {
+    show: {
+        icon: 'lucideMessageCircleQuestion',
+        colors: {
+            ring: 'bg-gray-500/10',
+            bg: 'bg-gray-500/15',
+            icon: 'text-gray-600!',
+        },
+    },
+    info: {
+        icon: 'lucideInfo',
+        colors: {
+            ring: 'bg-blue-500/10',
+            bg: 'bg-blue-500/15',
+            icon: 'text-blue-500!',
+        },
+    },
+    warning: {
+        icon: 'lucideTriangleAlert',
+        colors: {
+            ring: 'bg-amber-500/10',
+            bg: 'bg-amber-500/15',
+            icon: 'text-amber-500!',
+        },
+    },
+    danger: {
+        icon: 'lucideX',
+        okDestructive: true,
+        colors: {
+            ring: 'bg-red-500/10',
+            bg: 'bg-red-500/15',
+            icon: 'text-red-500!',
+        },
+    },
+};
+
+const zModalVariants = cva([
+    'fixed left-[50%] top-[50%] z-50 flex flex-col w-full translate-x-[-50%]',
+    'translate-y-[-50%] border bg-background py-4 shadow-lg rounded-lg',
+    'max-w-[calc(100%-2rem)] overflow-hidden',
+    'max-h-[80dvh]',
+].join(' '));
+
+class ZModalComponent extends BasePortalOutlet {
+    zOk = output();
+    zCancel = output();
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zVisible = model(false, ...(ngDevMode ? [{ debugName: "zVisible" }] : []));
+    zTitle = input(...(ngDevMode ? [undefined, { debugName: "zTitle" }] : []));
+    zDescription = input(...(ngDevMode ? [undefined, { debugName: "zDescription" }] : []));
+    zWidth = input('500px', ...(ngDevMode ? [{ debugName: "zWidth" }] : []));
+    zClosable = input(true, ...(ngDevMode ? [{ debugName: "zClosable" }] : []));
+    zMaskClosable = input(true, ...(ngDevMode ? [{ debugName: "zMaskClosable" }] : []));
+    zHideFooter = input(false, ...(ngDevMode ? [{ debugName: "zHideFooter" }] : []));
+    zOkText = input('OK', ...(ngDevMode ? [{ debugName: "zOkText" }] : []));
+    zCancelText = input('Cancel', ...(ngDevMode ? [{ debugName: "zCancelText" }] : []));
+    zOkDestructive = input(false, ...(ngDevMode ? [{ debugName: "zOkDestructive" }] : []));
+    zOkDisabled = input(false, ...(ngDevMode ? [{ debugName: "zOkDisabled" }] : []));
+    zLoading = input(false, ...(ngDevMode ? [{ debugName: "zLoading" }] : []));
+    zContentLoading = input(false, ...(ngDevMode ? [{ debugName: "zContentLoading" }] : []));
+    zSkeletonRows = input(3, ...(ngDevMode ? [{ debugName: "zSkeletonRows" }] : []));
+    zOverlay = input(getOverlayType(), ...(ngDevMode ? [{ debugName: "zOverlay" }] : []));
+    customHeader = contentChild(ZModalHeaderDirective, ...(ngDevMode ? [{ debugName: "customHeader" }] : []));
+    customContent = contentChild(ZModalContentDirective, ...(ngDevMode ? [{ debugName: "customContent" }] : []));
+    customFooter = contentChild(ZModalFooterDirective, ...(ngDevMode ? [{ debugName: "customFooter" }] : []));
+    modalRef;
+    portalOutlet = viewChild(CdkPortalOutlet, ...(ngDevMode ? [{ debugName: "portalOutlet" }] : []));
+    dummyTemplateRef = viewChild('dummyTemplate', ...(ngDevMode ? [{ debugName: "dummyTemplateRef" }] : []));
+    mainContentRef = viewChild('mainContent', ...(ngDevMode ? [{ debugName: "mainContentRef" }] : []));
+    config = inject((ZModalOptions), { optional: true }) || new ZModalOptions();
+    _platformId = inject(PLATFORM_ID);
+    _host = inject((ElementRef));
+    _overlay = inject(Overlay);
+    _viewContainerRef = inject(ViewContainerRef);
+    _cdr = inject(ChangeDetectorRef);
+    _templateOverlayRef = null;
+    _originalParent = null;
+    _originalNextSibling = null;
+    _backdropSubscription = null;
+    isLeaving = signal(false, ...(ngDevMode ? [{ debugName: "isLeaving" }] : []));
+    hasScrollableContent = signal(false, ...(ngDevMode ? [{ debugName: "hasScrollableContent" }] : []));
+    isScrolledFromTop = signal(false, ...(ngDevMode ? [{ debugName: "isScrolledFromTop" }] : []));
+    isScrolledToBottom = signal(false, ...(ngDevMode ? [{ debugName: "isScrolledToBottom" }] : []));
+    isServiceMode = computed(() => !!this.modalRef, ...(ngDevMode ? [{ debugName: "isServiceMode" }] : []));
+    isTemplateMode = computed(() => !this.isServiceMode(), ...(ngDevMode ? [{ debugName: "isTemplateMode" }] : []));
+    isConfirmMode = computed(() => !!this.config.zConfirmType, ...(ngDevMode ? [{ debugName: "isConfirmMode" }] : []));
+    shouldRenderContent = computed(() => this.zVisible() || this.isLeaving(), ...(ngDevMode ? [{ debugName: "shouldRenderContent" }] : []));
+    isStringContent = computed(() => typeof this.config.zContent === 'string' && !this.isConfirmMode(), ...(ngDevMode ? [{ debugName: "isStringContent" }] : []));
+    shouldShowShadow = computed(() => true, ...(ngDevMode ? [{ debugName: "shouldShowShadow" }] : []));
+    _lastScrollHeight = 0;
+    ngAfterViewChecked() {
+        this._checkScrollState();
+    }
+    _checkScrollState() {
+        const scrollbar = this.mainContentRef();
+        if (!scrollbar) {
+            return;
+        }
+        const viewport = scrollbar.nativeElement.querySelector('.ng-scroll-viewport');
+        if (!viewport) {
+            return;
+        }
+        if (viewport.scrollHeight === this._lastScrollHeight) {
+            return;
+        }
+        this._lastScrollHeight = viewport.scrollHeight;
+        const hasVerticalScroll = viewport.scrollHeight > viewport.clientHeight;
+        this.hasScrollableContent.set(hasVerticalScroll);
+    }
+    onContentScroll(event) {
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        const { scrollTop } = target;
+        const { scrollHeight } = target;
+        const { clientHeight } = target;
+        this.isScrolledFromTop.set(scrollTop > 0);
+        this.isScrolledToBottom.set(scrollTop + clientHeight >= scrollHeight - 1);
+    }
+    confirmIconColors = computed(() => {
+        const type = this.config.zConfirmType ?? 'show';
+        return Z_MODAL_CONFIRM_CONFIG[type].colors;
+    }, ...(ngDevMode ? [{ debugName: "confirmIconColors" }] : []));
+    effectiveTitle = computed(() => (this.isServiceMode() ? this.config.zTitle : this.zTitle()), ...(ngDevMode ? [{ debugName: "effectiveTitle" }] : []));
+    effectiveDescription = computed(() => this.isServiceMode() ? this.config.zDescription : this.zDescription(), ...(ngDevMode ? [{ debugName: "effectiveDescription" }] : []));
+    effectiveClosable = computed(() => this.isServiceMode() ? (this.config.zClosable ?? true) : this.zClosable(), ...(ngDevMode ? [{ debugName: "effectiveClosable" }] : []));
+    effectiveHideFooter = computed(() => this.isServiceMode() ? this.config.zHideFooter : this.zHideFooter(), ...(ngDevMode ? [{ debugName: "effectiveHideFooter" }] : []));
+    effectiveOkText = computed(() => (this.isServiceMode() ? this.config.zOkText : this.zOkText()), ...(ngDevMode ? [{ debugName: "effectiveOkText" }] : []));
+    effectiveCancelText = computed(() => this.isServiceMode() ? this.config.zCancelText : this.zCancelText(), ...(ngDevMode ? [{ debugName: "effectiveCancelText" }] : []));
+    effectiveOkDestructive = computed(() => this.isServiceMode() ? this.config.zOkDestructive : this.zOkDestructive(), ...(ngDevMode ? [{ debugName: "effectiveOkDestructive" }] : []));
+    effectiveTypeOk = computed(() => {
+        if (!this.isServiceMode()) {
+            return 'default';
+        }
+        const typeMap = {
+            show: 'default',
+            info: 'info',
+            warning: 'warning',
+            danger: 'error',
+        };
+        const confirmType = this.config.zConfirmType;
+        return confirmType ? (typeMap[confirmType] ?? 'default') : 'default';
+    }, ...(ngDevMode ? [{ debugName: "effectiveTypeOk" }] : []));
+    effectiveOkDisabled = computed(() => this.isServiceMode() ? this.config.zOkDisabled : this.zOkDisabled(), ...(ngDevMode ? [{ debugName: "effectiveOkDisabled" }] : []));
+    effectiveLoading = computed(() => {
+        if (this.isServiceMode()) {
+            return this.modalRef?.loading() || (this.config.zLoading?.() ?? false);
+        }
+        return this.zLoading();
+    }, ...(ngDevMode ? [{ debugName: "effectiveLoading" }] : []));
+    effectiveContentLoading = computed(() => {
+        if (this.isServiceMode()) {
+            return this.config.zContentLoading?.() ?? false;
+        }
+        return this.zContentLoading();
+    }, ...(ngDevMode ? [{ debugName: "effectiveContentLoading" }] : []));
+    effectiveSkeletonRows = computed(() => {
+        if (this.isServiceMode()) {
+            return this.config.zSkeletonRows ?? 3;
+        }
+        return this.zSkeletonRows();
+    }, ...(ngDevMode ? [{ debugName: "effectiveSkeletonRows" }] : []));
+    effectiveWidth = computed(() => {
+        if (this.isServiceMode()) {
+            return this.zWidth() || this.config.zWidth || null;
+        }
+        return this.shouldRenderContent() ? this.zWidth() : null;
+    }, ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : []));
+    isDeferLoading = computed(() => {
+        if (!this.isServiceMode()) {
+            return false;
+        }
+        return !!this.config.zDefer && !this.portalOutlet()?.hasAttached();
+    }, ...(ngDevMode ? [{ debugName: "isDeferLoading" }] : []));
+    classes = computed(() => zMergeClasses(zModalVariants(), this.isServiceMode() ? this.config.class : this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    hostClasses = computed(() => {
+        const baseClasses = this.classes();
+        if (this.isServiceMode()) {
+            return `${baseClasses} z-modal-service-mode`.trim();
+        }
+        if (this.shouldRenderContent()) {
+            return `${baseClasses} z-modal-template-mode`.trim();
+        }
+        return 'z-modal-template-host';
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    constructor() {
+        super();
+        effect(() => {
+            const visible = this.zVisible();
+            if (visible && this.isTemplateMode() && !this._templateOverlayRef) {
+                this._openTemplateOverlay();
+                return;
+            }
+            if (!visible && this.isTemplateMode() && this._templateOverlayRef && !this.isLeaving()) {
+                this._closeWithAnimation();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._disposeTemplateOverlay();
+    }
+    getNativeElement() {
+        return this._host.nativeElement;
+    }
+    attachComponentPortal(portal) {
+        this._cdr.detectChanges();
+        const outlet = this.portalOutlet();
+        if (outlet?.hasAttached()) {
+            throw new Error('Attempting to attach modal content after content is already attached');
+        }
+        return outlet?.attachComponentPortal(portal);
+    }
+    attachTemplatePortal(portal) {
+        const outlet = this.portalOutlet();
+        if (outlet?.hasAttached()) {
+            throw new Error('Attempting to attach modal content after content is already attached');
+        }
+        return outlet?.attachTemplatePortal(portal);
+    }
+    onOkClick() {
+        if (this.effectiveLoading()) {
+            return;
+        }
+        this.zOk.emit();
+    }
+    onCloseClick() {
+        this.zCancel.emit();
+        if (this.isTemplateMode() && !this.effectiveLoading()) {
+            this._closeWithAnimation();
+        }
+    }
+    onBackdropClick() {
+        if (this.zMaskClosable() && !this.effectiveLoading()) {
+            this._closeWithAnimation();
+        }
+    }
+    open() {
+        this.isLeaving.set(false);
+        this.zVisible.set(true);
+    }
+    close() {
+        this._closeWithAnimation();
+    }
+    _createOverlay() {
+        if (!isPlatformBrowser(this._platformId)) {
+            return null;
+        }
+        const overlayType = getOverlayType();
+        const backdropClass = overlayType === 'blur' ? 'z-modal-backdrop-blur' : 'z-modal-backdrop-dark';
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass,
+            positionStrategy: this._overlay.position().global(),
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+        });
+        return this._overlay.create(overlayConfig);
+    }
+    _openTemplateOverlay() {
+        if (this._templateOverlayRef) {
+            return;
+        }
+        const dummyRef = this.dummyTemplateRef();
+        if (!dummyRef) {
+            return;
+        }
+        this._templateOverlayRef = this._createOverlay();
+        if (!this._templateOverlayRef) {
+            return;
+        }
+        const hostElement = this._host.nativeElement;
+        this._originalParent = hostElement.parentElement;
+        this._originalNextSibling = hostElement.nextSibling;
+        const portal = new TemplatePortal(dummyRef, this._viewContainerRef);
+        this._templateOverlayRef.attach(portal);
+        const overlayPane = this._templateOverlayRef.overlayElement;
+        overlayPane.style.position = 'static';
+        overlayPane.appendChild(hostElement);
+        this._backdropSubscription = this._templateOverlayRef.backdropClick().subscribe(() => {
+            this.onBackdropClick();
+        });
+    }
+    _closeWithAnimation() {
+        if (this.isLeaving()) {
+            return;
+        }
+        this.isLeaving.set(true);
+        this.zVisible.set(false);
+        const hostElement = this._host.nativeElement;
+        const { backdropElement } = this._templateOverlayRef ?? {};
+        if (backdropElement) {
+            backdropElement.classList.add('z-backdrop-leaving');
+        }
+        hostElement.classList.add('modal-leave');
+        setTimeout(() => {
+            this.isLeaving.set(false);
+            this._disposeTemplateOverlay();
+        }, Z_MODAL_ANIMATION_DURATION);
+    }
+    _disposeTemplateOverlay() {
+        const hostElement = this._host.nativeElement;
+        if (this._originalParent && this._originalNextSibling) {
+            this._originalParent.insertBefore(hostElement, this._originalNextSibling);
+        }
+        if (this._originalParent && !this._originalNextSibling) {
+            this._originalParent.appendChild(hostElement);
+        }
+        hostElement.classList.remove('modal-leave');
+        if (this._templateOverlayRef) {
+            this._templateOverlayRef.dispose();
+            this._templateOverlayRef = null;
+        }
+        this._originalParent = null;
+        this._originalNextSibling = null;
+        if (this._backdropSubscription) {
+            this._backdropSubscription.unsubscribe();
+            this._backdropSubscription = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZModalComponent, isStandalone: true, selector: "z-modal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zClosable: { classPropertyName: "zClosable", publicName: "zClosable", isSignal: true, isRequired: false, transformFunction: null }, zMaskClosable: { classPropertyName: "zMaskClosable", publicName: "zMaskClosable", isSignal: true, isRequired: false, transformFunction: null }, zHideFooter: { classPropertyName: "zHideFooter", publicName: "zHideFooter", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zOkDestructive: { classPropertyName: "zOkDestructive", publicName: "zOkDestructive", isSignal: true, isRequired: false, transformFunction: null }, zOkDisabled: { classPropertyName: "zOkDisabled", publicName: "zOkDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zContentLoading: { classPropertyName: "zContentLoading", publicName: "zContentLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOk: "zOk", zCancel: "zCancel", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()", "style.width": "effectiveWidth()" } }, queries: [{ propertyName: "customHeader", first: true, predicate: ZModalHeaderDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ZModalContentDirective, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: ZModalFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }, { propertyName: "dummyTemplateRef", first: true, predicate: ["dummyTemplate"], descendants: true, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zModal"], usesInheritance: true, ngImport: i0, template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (customHeader(); as headerDir) {\n      <header [class.z-modal-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex items-start justify-between px-4\">\n          <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n        </div>\n      </header>\n    } @else if (effectiveTitle()) {\n      <header [class.z-modal-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n          <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n            @if (effectiveTitle(); as title) {\n              @switch (title | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                }\n                @case ('html') {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\"\n                    [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                }\n                @default {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\">\n                    {{ title }}\n                  </h4>\n                }\n              }\n            }\n            @if (effectiveDescription(); as description) {\n              @switch (description | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                }\n                @case ('html') {\n                  <p\n                    data-testid=\"z-modal-description\"\n                    class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                    [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                }\n                @default {\n                  <p data-testid=\"z-modal-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ description }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n    } @else if (effectiveClosable()) {\n      <header [class.z-modal-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n\n    <ng-scrollbar class=\"z-modal-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n      <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (customFooter(); as footerDir) {\n      <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n        </div>\n      </footer>\n    } @else if (!effectiveHideFooter()) {\n      <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          @if (effectiveCancelText() !== null) {\n            <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n              {{ effectiveCancelText() ?? 'Cancel' }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              {{ effectiveOkText() ?? 'OK' }}\n            </button>\n          }\n        </div>\n      </footer>\n    }\n  } @placeholder {\n    <div class=\"flex h-[200px] flex-col gap-4 px-4\">\n      <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  <!-- Confirm Modal Layout (no skeleton) -->\n  @if (isConfirmMode()) {\n    <div class=\"flex flex-col items-center px-4 pt-2 text-center\">\n      @if (config.zConfirmIcon) {\n        <div class=\"relative mb-4 flex size-20 items-center justify-center\">\n          <div class=\"absolute inset-0 rounded-full\" [class]=\"confirmIconColors().ring\"></div>\n          <div class=\"relative flex size-14 items-center justify-center rounded-full\" [class]=\"confirmIconColors().bg\">\n            <z-icon [zType]=\"config.zConfirmIcon\" zSize=\"30\" [zStrokeWidth]=\"2.6\" [class]=\"confirmIconColors().icon\" />\n          </div>\n        </div>\n      }\n\n      <!-- Title centered -->\n      @if (effectiveTitle(); as title) {\n        @switch (title | zContentType) {\n          @case ('template') {\n            <ng-container *ngTemplateOutlet=\"$any(title)\" />\n          }\n          @case ('html') {\n            <h4\n              data-testid=\"z-modal-title\"\n              class=\"m-0 text-lg leading-snug font-semibold\"\n              [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n          }\n          @default {\n            <h4 data-testid=\"z-modal-title\" class=\"m-0 text-lg leading-snug font-semibold\">\n              {{ title }}\n            </h4>\n          }\n        }\n      }\n\n      <!-- Description centered -->\n      @if (config.zContent; as content) {\n        <p\n          data-testid=\"z-modal-description\"\n          class=\"text-muted-foreground m-0 mt-2 text-sm\"\n          [innerHTML]=\"$any(content) | zSafeHtml\"></p>\n      }\n    </div>\n\n    <!-- Footer centered -->\n    @if (!effectiveHideFooter()) {\n      <footer class=\"mt-4 flex flex-row justify-center gap-3 pb-2\">\n        @if (effectiveCancelText() !== null) {\n          <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? 'Cancel' }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveTypeOk()\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? 'OK' }}\n          </button>\n        }\n      </footer>\n    }\n  } @else {\n    <!-- Normal Modal Layout with defer -->\n    @defer (when !effectiveContentLoading()) {\n      @if (effectiveTitle()) {\n        <header [class.z-modal-header-shadow]=\"shouldShowShadow()\">\n          <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n            <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\">\n                      {{ title }}\n                    </h4>\n                  }\n                }\n              }\n            </div>\n            @if (effectiveClosable()) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            }\n          </div>\n        </header>\n      } @else if (effectiveClosable()) {\n        <header [class.z-modal-header-shadow]=\"shouldShowShadow()\">\n          <div class=\"flex justify-end px-4\">\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          </div>\n        </header>\n      }\n\n      <ng-scrollbar class=\"z-modal-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n        <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n          <ng-template cdkPortalOutlet />\n\n          @if (isStringContent()) {\n            <div data-testid=\"z-modal-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n          }\n        </main>\n      </ng-scrollbar>\n\n      @if (!effectiveHideFooter()) {\n        <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\">\n          <div class=\"flex flex-row justify-end gap-2 px-4\">\n            @if (effectiveCancelText() !== null) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-cancel-button\"\n                z-button\n                zType=\"outline\"\n                (click)=\"onCloseClick()\">\n                @if (config.zCancelIcon) {\n                  <z-icon [zType]=\"config.zCancelIcon\" />\n                }\n                {{ effectiveCancelText() ?? 'Cancel' }}\n              </button>\n            }\n\n            @if (effectiveOkText() !== null) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-ok-button\"\n                z-button\n                [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n                [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n                [zLoading]=\"effectiveLoading()\"\n                (click)=\"onOkClick()\">\n                @if (config.zOkIcon && !effectiveLoading()) {\n                  <z-icon [zType]=\"config.zOkIcon\" />\n                }\n                {{ effectiveOkText() ?? 'OK' }}\n              </button>\n            }\n          </div>\n        </footer>\n      }\n    } @placeholder {\n      <div class=\"flex h-[200px] flex-col gap-4 px-4\">\n        <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n      </div>\n    }\n  }\n}\n", styles: [":host.z-modal-service-mode,:host.z-modal-template-mode{--z-enter-opacity: 0;--z-enter-translate-y: -8px;--z-enter-scale: .95;animation:z-enter .18s cubic-bezier(.32,.72,0,1) forwards}:host.z-modal-service-mode.modal-leave,:host.z-modal-template-mode.modal-leave{--z-exit-opacity: 0;--z-exit-translate-y: -8px;--z-exit-scale: .95;animation:z-exit .15s cubic-bezier(.32,.72,0,1) forwards}:host.z-modal-template-host{display:contents}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .12s ease-in forwards}.z-modal-header-shadow{padding-bottom:16px;box-shadow:0 2px 8px -2px #0000001a}.z-modal-footer-shadow{padding-top:16px;box-shadow:0 -2px 8px -2px #0000001a}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out,padding .2s ease-out}.z-modal-scrollbar{--scrollbar-padding: 2px}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius", "zClass"] }, { kind: "pipe", type: ZContentTypePipe, name: "zContentType" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NgTemplateOutlet,
+                ZButtonComponent,
+                ZIconComponent, import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), ZContentTypePipe,
+                ZSafeHtmlPipe], () => [i1.CdkPortalOutlet, NgTemplateOutlet,
+                ZButtonComponent,
+                ZIconComponent, import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar), ZContentTypePipe,
+                ZSafeHtmlPipe]] });
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.6", ngImport: i0, type: ZModalComponent, resolveDeferredDeps: () => [import('@shival99/z-ui/components/z-tooltip').then(m => m.ZTooltipDirective), import('ngx-scrollbar').then(m => m.NgScrollbar)], resolveMetadata: (ZTooltipDirective, NgScrollbar) => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'z-modal', imports: [
+                            PortalModule,
+                            NgTemplateOutlet,
+                            ZButtonComponent,
+                            ZIconComponent,
+                            ZContentTypePipe,
+                            ZTooltipDirective,
+                            ZSkeletonComponent,
+                            NgScrollbar,
+                            ZSafeHtmlPipe,
+                        ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                            '[class]': 'hostClasses()',
+                            '[style.width]': 'effectiveWidth()',
+                        }, exportAs: 'zModal', template: "<!-- Dummy template to trigger CDK backdrop creation -->\n<ng-template #dummyTemplate />\n\n<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @defer (when !effectiveContentLoading()) {\n    @if (customHeader(); as headerDir) {\n      <header [class.z-modal-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex items-start justify-between px-4\">\n          <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n        </div>\n      </header>\n    } @else if (effectiveTitle()) {\n      <header [class.z-modal-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n          <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n            @if (effectiveTitle(); as title) {\n              @switch (title | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                }\n                @case ('html') {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\"\n                    [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                }\n                @default {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\">\n                    {{ title }}\n                  </h4>\n                }\n              }\n            }\n            @if (effectiveDescription(); as description) {\n              @switch (description | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                }\n                @case ('html') {\n                  <p\n                    data-testid=\"z-modal-description\"\n                    class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                    [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                }\n                @default {\n                  <p data-testid=\"z-modal-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ description }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n    } @else if (effectiveClosable()) {\n      <header [class.z-modal-header-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n\n    <ng-scrollbar class=\"z-modal-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n      <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </main>\n    </ng-scrollbar>\n\n    @if (customFooter(); as footerDir) {\n      <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n        </div>\n      </footer>\n    } @else if (!effectiveHideFooter()) {\n      <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\">\n        <div class=\"flex flex-row justify-end gap-2 px-4\">\n          @if (effectiveCancelText() !== null) {\n            <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n              {{ effectiveCancelText() ?? 'Cancel' }}\n            </button>\n          }\n\n          @if (effectiveOkText() !== null) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-ok-button\"\n              z-button\n              [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n              [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n              [zLoading]=\"effectiveLoading()\"\n              (click)=\"onOkClick()\">\n              {{ effectiveOkText() ?? 'OK' }}\n            </button>\n          }\n        </div>\n      </footer>\n    }\n  } @placeholder {\n    <div class=\"flex h-[200px] flex-col gap-4 px-4\">\n      <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n    </div>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  <!-- Confirm Modal Layout (no skeleton) -->\n  @if (isConfirmMode()) {\n    <div class=\"flex flex-col items-center px-4 pt-2 text-center\">\n      @if (config.zConfirmIcon) {\n        <div class=\"relative mb-4 flex size-20 items-center justify-center\">\n          <div class=\"absolute inset-0 rounded-full\" [class]=\"confirmIconColors().ring\"></div>\n          <div class=\"relative flex size-14 items-center justify-center rounded-full\" [class]=\"confirmIconColors().bg\">\n            <z-icon [zType]=\"config.zConfirmIcon\" zSize=\"30\" [zStrokeWidth]=\"2.6\" [class]=\"confirmIconColors().icon\" />\n          </div>\n        </div>\n      }\n\n      <!-- Title centered -->\n      @if (effectiveTitle(); as title) {\n        @switch (title | zContentType) {\n          @case ('template') {\n            <ng-container *ngTemplateOutlet=\"$any(title)\" />\n          }\n          @case ('html') {\n            <h4\n              data-testid=\"z-modal-title\"\n              class=\"m-0 text-lg leading-snug font-semibold\"\n              [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n          }\n          @default {\n            <h4 data-testid=\"z-modal-title\" class=\"m-0 text-lg leading-snug font-semibold\">\n              {{ title }}\n            </h4>\n          }\n        }\n      }\n\n      <!-- Description centered -->\n      @if (config.zContent; as content) {\n        <p\n          data-testid=\"z-modal-description\"\n          class=\"text-muted-foreground m-0 mt-2 text-sm\"\n          [innerHTML]=\"$any(content) | zSafeHtml\"></p>\n      }\n    </div>\n\n    <!-- Footer centered -->\n    @if (!effectiveHideFooter()) {\n      <footer class=\"mt-4 flex flex-row justify-center gap-3 pb-2\">\n        @if (effectiveCancelText() !== null) {\n          <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? 'Cancel' }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveTypeOk()\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? 'OK' }}\n          </button>\n        }\n      </footer>\n    }\n  } @else {\n    <!-- Normal Modal Layout with defer -->\n    @defer (when !effectiveContentLoading()) {\n      @if (effectiveTitle()) {\n        <header [class.z-modal-header-shadow]=\"shouldShowShadow()\">\n          <div class=\"flex w-full items-start justify-between overflow-hidden px-4\">\n            <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n              @if (effectiveTitle(); as title) {\n                @switch (title | zContentType) {\n                  @case ('template') {\n                    <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                  }\n                  @case ('html') {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\"\n                      [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                  }\n                  @default {\n                    <h4\n                      data-testid=\"z-modal-title\"\n                      class=\"m-0 truncate text-base leading-snug font-semibold\"\n                      z-tooltip\n                      [zContent]=\"title\">\n                      {{ title }}\n                    </h4>\n                  }\n                }\n              }\n            </div>\n            @if (effectiveClosable()) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            }\n          </div>\n        </header>\n      } @else if (effectiveClosable()) {\n        <header [class.z-modal-header-shadow]=\"shouldShowShadow()\">\n          <div class=\"flex justify-end px-4\">\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          </div>\n        </header>\n      }\n\n      <ng-scrollbar class=\"z-modal-scrollbar flex-1\" #mainContent track=\"vertical\" (scroll)=\"onContentScroll($event)\">\n        <main class=\"flex min-h-0 flex-col gap-4 px-4 py-4\">\n          <ng-template cdkPortalOutlet />\n\n          @if (isStringContent()) {\n            <div data-testid=\"z-modal-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n          }\n        </main>\n      </ng-scrollbar>\n\n      @if (!effectiveHideFooter()) {\n        <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\">\n          <div class=\"flex flex-row justify-end gap-2 px-4\">\n            @if (effectiveCancelText() !== null) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-cancel-button\"\n                z-button\n                zType=\"outline\"\n                (click)=\"onCloseClick()\">\n                @if (config.zCancelIcon) {\n                  <z-icon [zType]=\"config.zCancelIcon\" />\n                }\n                {{ effectiveCancelText() ?? 'Cancel' }}\n              </button>\n            }\n\n            @if (effectiveOkText() !== null) {\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-ok-button\"\n                z-button\n                [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n                [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n                [zLoading]=\"effectiveLoading()\"\n                (click)=\"onOkClick()\">\n                @if (config.zOkIcon && !effectiveLoading()) {\n                  <z-icon [zType]=\"config.zOkIcon\" />\n                }\n                {{ effectiveOkText() ?? 'OK' }}\n              </button>\n            }\n          </div>\n        </footer>\n      }\n    } @placeholder {\n      <div class=\"flex h-[200px] flex-col gap-4 px-4\">\n        <z-skeleton [zRows]=\"effectiveSkeletonRows()\" />\n      </div>\n    }\n  }\n}\n", styles: [":host.z-modal-service-mode,:host.z-modal-template-mode{--z-enter-opacity: 0;--z-enter-translate-y: -8px;--z-enter-scale: .95;animation:z-enter .18s cubic-bezier(.32,.72,0,1) forwards}:host.z-modal-service-mode.modal-leave,:host.z-modal-template-mode.modal-leave{--z-exit-opacity: 0;--z-exit-translate-y: -8px;--z-exit-scale: .95;animation:z-exit .15s cubic-bezier(.32,.72,0,1) forwards}:host.z-modal-template-host{display:contents}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .12s ease-in forwards}.z-modal-header-shadow{padding-bottom:16px;box-shadow:0 2px 8px -2px #0000001a}.z-modal-footer-shadow{padding-top:16px;box-shadow:0 -2px 8px -2px #0000001a}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out,padding .2s ease-out}.z-modal-scrollbar{--scrollbar-padding: 2px}\n"] }]
+            }], ctorParameters: () => [], propDecorators: { zOk: [{ type: i0.Output, args: ["zOk"] }], zCancel: [{ type: i0.Output, args: ["zCancel"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVisible", required: false }] }, { type: i0.Output, args: ["zVisibleChange"] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDescription", required: false }] }], zWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWidth", required: false }] }], zClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClosable", required: false }] }], zMaskClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaskClosable", required: false }] }], zHideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideFooter", required: false }] }], zOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkText", required: false }] }], zCancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCancelText", required: false }] }], zOkDestructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkDestructive", required: false }] }], zOkDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkDisabled", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zContentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], customHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZModalHeaderDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZModalContentDirective), { isSignal: true }] }], customFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZModalFooterDirective), { isSignal: true }] }], portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], dummyTemplateRef: [{ type: i0.ViewChild, args: ['dummyTemplate', { isSignal: true }] }], mainContentRef: [{ type: i0.ViewChild, args: ['mainContent', { isSignal: true }] }] } }) });
+
+let ZModalRef = class ZModalRef {
+    _overlayRef;
+    _config;
+    _containerInstance;
+    _platformId;
+    _destroy$ = new Subject();
+    _isClosing = false;
+    _result;
+    componentInstance = null;
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    constructor(_overlayRef, _config, _containerInstance, _platformId) {
+        this._overlayRef = _overlayRef;
+        this._config = _config;
+        this._containerInstance = _containerInstance;
+        this._platformId = _platformId;
+        this._containerInstance.zCancel.subscribe(() => this._trigger(ZModalTriggerAction.CANCEL));
+        this._containerInstance.zOk.subscribe(() => this._trigger(ZModalTriggerAction.OK));
+        if ((this._config.zMaskClosable ?? true) && isPlatformBrowser(this._platformId)) {
+            this._overlayRef
+                .outsidePointerEvents()
+                .pipe(takeUntil(this._destroy$))
+                .subscribe(() => {
+                if (!this.loading()) {
+                    this.close();
+                }
+            });
+        }
+        if (isPlatformBrowser(this._platformId)) {
+            fromEvent(document, 'keydown')
+                .pipe(filter(event => event.key === 'Escape'), takeUntil(this._destroy$))
+                .subscribe(() => {
+                if (!this.loading()) {
+                    this.close();
+                }
+            });
+        }
+    }
+    setLoading(value) {
+        this.loading.set(value);
+    }
+    close(result) {
+        if (this._isClosing) {
+            return;
+        }
+        this._isClosing = true;
+        this._result = result;
+        if (isPlatformBrowser(this._platformId)) {
+            const hostElement = this._containerInstance.getNativeElement();
+            hostElement.classList.add('modal-leave');
+            const { backdropElement } = this._overlayRef;
+            if (backdropElement) {
+                backdropElement.classList.add('z-backdrop-leaving');
+            }
+        }
+        setTimeout(() => {
+            if (this._overlayRef) {
+                if (this._overlayRef.hasAttached()) {
+                    this._overlayRef.detachBackdrop();
+                }
+                this._overlayRef.dispose();
+            }
+            if (!this._destroy$.closed) {
+                this._destroy$.next();
+                this._destroy$.complete();
+            }
+        }, Z_MODAL_ANIMATION_DURATION);
+    }
+    _trigger(action) {
+        if (this.loading()) {
+            return;
+        }
+        const trigger = {
+            ok: this._config.zOnOk,
+            cancel: this._config.zOnCancel,
+        }[action];
+        if (trigger instanceof EventEmitter) {
+            trigger.emit(this._getContentComponent());
+            return;
+        }
+        if (typeof trigger === 'function') {
+            const result = trigger(this._getContentComponent(), this);
+            this._closeWithResult(result);
+            return;
+        }
+        this.close();
+    }
+    _getContentComponent() {
+        return this.componentInstance;
+    }
+    _closeWithResult(result) {
+        if (result !== false) {
+            this.close(result);
+        }
+    }
+};
+ZModalRef = __decorate([
+    __param(3, Inject(PLATFORM_ID)),
+    __metadata("design:paramtypes", [OverlayRef,
+        ZModalOptions,
+        ZModalComponent, Object])
+], ZModalRef);
+
+class ZModalService {
+    _overlay = inject(Overlay);
+    _injector = inject(Injector);
+    _platformId = inject(PLATFORM_ID);
+    create(config) {
+        return this._open(config.zContent, config);
+    }
+    show(options) {
+        return this._confirmModal('show', options);
+    }
+    info(options) {
+        return this._confirmModal('info', options);
+    }
+    warning(options) {
+        return this._confirmModal('warning', options);
+    }
+    danger(options) {
+        return this._confirmModal('danger', options);
+    }
+    _confirmModal(type, options) {
+        const typeConfig = Z_MODAL_CONFIRM_CONFIG[type];
+        const config = {
+            zTitle: options.zTitle,
+            zContent: options.zContent,
+            zOkText: options.zOkText ?? 'OK',
+            zCancelText: options.zCancelText ?? 'Cancel',
+            zOkDestructive: typeConfig.okDestructive,
+            zConfirmIcon: options.zIcon ?? typeConfig.icon,
+            zMaskClosable: options.zMaskClosable ?? true,
+            zWidth: options.zWidth ?? '500px',
+            zConfirmType: type,
+            zData: options.zData,
+            zOnOk: () => options.zOnOk?.(),
+            zOnCancel: () => {
+                options.zOnCancel?.();
+            },
+        };
+        return this.create(config);
+    }
+    _open(componentOrTemplateRef, config) {
+        const overlayRef = this._createOverlay(config);
+        if (!overlayRef) {
+            return new ZModalRef(undefined, config, undefined, this._platformId);
+        }
+        const modalContainer = this._attachModalContainer(overlayRef, config);
+        const modalRef = this._attachModalContent(componentOrTemplateRef, modalContainer, overlayRef, config);
+        return modalRef;
+    }
+    _createOverlay(config) {
+        if (!isPlatformBrowser(this._platformId)) {
+            return undefined;
+        }
+        const overlayType = config.zOverlay ?? getOverlayType();
+        const backdropClass = overlayType === 'blur' ? 'z-modal-backdrop-blur' : 'z-modal-backdrop-dark';
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass,
+            positionStrategy: this._overlay.position().global(),
+        });
+        return this._overlay.create(overlayConfig);
+    }
+    _attachModalContainer(overlayRef, config) {
+        const injector = Injector.create({
+            parent: this._injector,
+            providers: [
+                { provide: OverlayRef, useValue: overlayRef },
+                { provide: ZModalOptions, useValue: config },
+            ],
+        });
+        const containerPortal = new ComponentPortal(ZModalComponent, config.zViewContainerRef, injector);
+        const containerRef = overlayRef.attach(containerPortal);
+        return containerRef.instance;
+    }
+    _attachModalContent(componentOrTemplateRef, modalContainer, overlayRef, config) {
+        const modalRef = new ZModalRef(overlayRef, config, modalContainer, this._platformId);
+        modalContainer.modalRef = modalRef;
+        if (componentOrTemplateRef instanceof TemplateRef) {
+            modalContainer.attachTemplatePortal(new TemplatePortal(componentOrTemplateRef, null, { modalRef }));
+            return modalRef;
+        }
+        if (typeof componentOrTemplateRef !== 'string') {
+            const injector = this._createInjector(modalRef, config);
+            const contentRef = modalContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, config.zViewContainerRef, injector));
+            if (contentRef) {
+                modalRef.componentInstance = contentRef.instance;
+            }
+        }
+        return modalRef;
+    }
+    _createInjector(modalRef, config) {
+        return Injector.create({
+            parent: this._injector,
+            providers: [
+                { provide: ZModalRef, useValue: modalRef },
+                { provide: Z_MODAL_DATA, useValue: config.zData },
+            ],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZModalComponent, ZModalContentDirective, ZModalFooterDirective, ZModalHeaderDirective, ZModalRef, ZModalService, Z_MODAL_DATA, zModalVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-modal.mjs.map