import { ComponentType, OverlayRef } from '@angular/cdk/overlay'; import * as _angular_core from '@angular/core'; import { TemplateRef, Type, WritableSignal, EventEmitter, ViewContainerRef, InjectionToken, OnDestroy, AfterViewChecked, ComponentRef, EmbeddedViewRef } from '@angular/core'; import { ZIcon } from '@shival99/z-ui/components/z-icon'; import { ClassValue } from 'clsx'; import { Observable } from 'rxjs'; import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal'; import { NgScrollbar } from 'ngx-scrollbar'; import * as class_variance_authority_types from 'class-variance-authority/types'; type ZModalContentType = ComponentType | TemplateRef | string; declare const Z_MODAL_DATA: InjectionToken; type ZModalOnClickCallBack = (instance: T, modalRef?: unknown) => false | void | object; type ZModalConfirmType = 'show' | 'info' | 'warning' | 'danger'; /** * 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 */ declare class ZModalOptions { /** Icon for the cancel button */ zCancelIcon?: ZIcon; /** Text for the cancel button. Set to null to hide the button */ zCancelText?: string | null; /** Whether the modal is closable (shows close button) */ zClosable?: boolean; /** Confirm type for preset styling (show, info, warning, danger) */ zConfirmType?: 'show' | 'info' | 'warning' | 'danger'; /** Icon for the confirm modal */ zConfirmIcon?: ZIcon; /** Modal content - can be a component, template, or string */ zContent?: string | TemplateRef | Type; /** Custom CSS classes for the modal */ class?: ClassValue; /** Custom CSS classes for the modal body */ zBodyClass?: ClassValue; /** Data to be passed to the content component via Z_MODAL_DATA token */ zData?: U; /** * 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?: Observable; /** Description text shown below the title */ zDescription?: string; /** Whether to disable the header and footer shadows */ zDisableShadow?: boolean; /** Whether to show a border below the header */ zHeaderBorder?: boolean; /** Whether to show a border above the footer */ zFooterBorder?: boolean; /** Whether to hide the default footer */ zHideFooter?: boolean; /** Whether to hide the default header */ zHideHeader?: boolean; /** * 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 * }, * }); * ``` */ readonly zLoading?: WritableSignal; /** Whether clicking mask closes the modal */ zMaskClosable?: boolean; /** Whether OK button has destructive (red) style */ zOkDestructive?: boolean; /** Whether OK button is disabled */ zOkDisabled?: boolean; /** Overlay style: 'dark' (black overlay) or 'blur' (backdrop blur) */ zOverlay?: 'dark' | 'blur'; /** Icon for the OK button */ zOkIcon?: ZIcon; /** Text for the OK button. Set to null to hide the button */ zOkText?: string | null; /** Callback or EventEmitter when cancel is clicked */ zOnCancel?: EventEmitter | ZModalOnClickCallBack; /** Callback or EventEmitter when OK is clicked */ zOnOk?: EventEmitter | ZModalOnClickCallBack; /** Modal title - supports string, HTML string, or TemplateRef */ zTitle?: string | TemplateRef; /** ViewContainerRef for the modal portal */ zViewContainerRef?: ViewContainerRef; /** Modal width. In service mode this is applied as the minimum width to allow content to expand naturally. */ zWidth?: string; /** WritableSignal to control content loading state (shows skeleton when true) */ readonly zContentLoading?: WritableSignal; /** Number of skeleton rows to show when content is loading */ zSkeletonRows?: number; } interface ZModalConfirmOptions { zTitle: string; zContent?: string; zIcon?: ZIcon; zOkText?: string; zCancelText?: string | null; /** Callback when OK is clicked. Return false to prevent auto-close */ zOnOk?: () => void | false | Promise; zOnCancel?: () => void; zMaskClosable?: boolean; /** Modal width. In service mode this is applied as the minimum width to allow content to expand naturally. */ zWidth?: string; zData?: U; } interface ZModalConfirmIconColors { ring: string; bg: string; icon: string; } declare class ZModalContentDirective { readonly templateRef: TemplateRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class ZModalFooterDirective { readonly templateRef: TemplateRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class ZModalHeaderDirective { readonly templateRef: TemplateRef; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class ZModalRef { private readonly _overlayRef; private readonly _config; private readonly _containerInstance; private readonly _platformId; private readonly _destroy$; private _isClosing; private _result?; componentInstance: T | null; readonly loading: _angular_core.WritableSignal; readonly zAfterClose: EventEmitter; constructor(_overlayRef: OverlayRef, _config: ZModalOptions, _containerInstance: ZModalComponent, _platformId: object); setLoading(value: boolean): void; close(result?: R): void; private _trigger; private _getContentComponent; private _closeWithResult; } declare class ZModalComponent extends BasePortalOutlet implements OnDestroy, AfterViewChecked { zOk: _angular_core.OutputEmitterRef; zCancel: _angular_core.OutputEmitterRef; zAfterClose: _angular_core.OutputEmitterRef; readonly zScrollbar: _angular_core.OutputEmitterRef; readonly class: _angular_core.InputSignal; readonly zBodyClass: _angular_core.InputSignal; readonly zVisible: _angular_core.ModelSignal; readonly zTitle: _angular_core.InputSignal | undefined>; readonly zDescription: _angular_core.InputSignal | undefined>; readonly zWidth: _angular_core.InputSignal; readonly zClosable: _angular_core.InputSignal; readonly zMaskClosable: _angular_core.InputSignal; readonly zDisableShadow: _angular_core.InputSignal; readonly zHeaderBorder: _angular_core.InputSignal; readonly zFooterBorder: _angular_core.InputSignal; readonly zHideHeader: _angular_core.InputSignal; readonly zHideFooter: _angular_core.InputSignal; readonly zOkText: _angular_core.InputSignal; readonly zCancelText: _angular_core.InputSignal; readonly zOkDestructive: _angular_core.InputSignal; readonly zOkDisabled: _angular_core.InputSignal; readonly zLoading: _angular_core.InputSignal; readonly zContentLoading: _angular_core.InputSignal; readonly zSkeletonRows: _angular_core.InputSignal; readonly zOverlay: _angular_core.InputSignal<"dark" | "blur">; protected readonly customHeader: _angular_core.Signal; protected readonly customContent: _angular_core.Signal; protected readonly customFooter: _angular_core.Signal; modalRef?: ZModalRef; readonly portalOutlet: _angular_core.Signal; protected readonly dummyTemplateRef: _angular_core.Signal | undefined>; protected readonly mainContentRef: _angular_core.Signal; protected readonly config: ZModalOptions; private readonly _platformId; private readonly _host; private readonly _overlay; private readonly _viewContainerRef; private readonly _cdr; private readonly _destroyRef; private readonly _zTranslate; private readonly _overlayContainerService; private readonly _zIndexService; private _templateOverlayRef; private _originalParent; private _originalNextSibling; private _backdropSubscription; private _closeTimeout; protected readonly isLeaving: _angular_core.WritableSignal; protected readonly hasScrollableContent: _angular_core.WritableSignal; protected readonly isScrolledFromTop: _angular_core.WritableSignal; protected readonly isScrolledToBottom: _angular_core.WritableSignal; protected readonly isServiceMode: _angular_core.Signal; protected readonly isTemplateMode: _angular_core.Signal; protected readonly isConfirmMode: _angular_core.Signal; protected readonly shouldRenderContent: _angular_core.Signal; protected readonly isStringContent: _angular_core.Signal; private _lastScrollHeight; ngAfterViewChecked(): void; private _checkScrollState; onContentScroll(event: Event): void; protected readonly confirmIconColors: _angular_core.Signal; protected readonly effectiveTitle: _angular_core.Signal | undefined>; protected readonly effectiveDescription: _angular_core.Signal | undefined>; protected readonly hasEffectiveDescription: _angular_core.Signal; protected readonly headerContentClasses: _angular_core.Signal; protected readonly effectiveBodyClass: _angular_core.Signal; protected readonly templateBodyClasses: _angular_core.Signal; protected readonly serviceBodyClasses: _angular_core.Signal; protected readonly effectiveClosable: _angular_core.Signal; protected readonly effectiveDisableShadow: _angular_core.Signal; protected readonly shouldShowShadow: _angular_core.Signal; protected readonly effectiveHeaderBorder: _angular_core.Signal; protected readonly effectiveFooterBorder: _angular_core.Signal; protected readonly effectiveHideFooter: _angular_core.Signal; protected readonly effectiveHideHeader: _angular_core.Signal; protected readonly effectiveOkText: _angular_core.Signal; protected readonly effectiveCancelText: _angular_core.Signal; protected readonly effectiveOkDestructive: _angular_core.Signal; protected readonly effectiveTypeOk: _angular_core.Signal<"info" | "warning" | "error" | "link" | "default" | "primary" | "secondary" | "destructive" | "destructive-heartbeat" | "success" | "outline" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-info" | "outline-warning" | "outline-error" | "outline-destructive" | "outline-shimmer" | "outline-success-secondary" | "outline-info-secondary" | "outline-warning-secondary" | "outline-error-secondary" | "outline-destructive-secondary" | "outline-primary-secondary" | "outline-primary-soft" | "outline-success-soft" | "outline-info-soft" | "outline-warning-soft" | "outline-error-soft" | "outline-destructive-soft" | "outline-primary-soft-border" | "outline-success-soft-border" | "outline-info-soft-border" | "outline-warning-soft-border" | "outline-error-soft-border" | "outline-destructive-soft-border" | "ghost" | "ghost-primary" | "ghost-success" | "ghost-info" | "ghost-warning" | "ghost-error" | "ghost-destructive" | "subtle" | "subtle-primary" | "subtle-success" | "subtle-info" | "subtle-warning" | "subtle-destructive" | "subtle-outline" | "subtle-primary-outline" | "subtle-success-outline" | "subtle-info-outline" | "subtle-warning-outline" | "subtle-destructive-outline" | null | undefined>; protected readonly effectiveOkDisabled: _angular_core.Signal; protected readonly effectiveLoading: _angular_core.Signal; protected readonly effectiveContentLoading: _angular_core.Signal; protected readonly effectiveSkeletonRows: _angular_core.Signal; protected readonly effectiveWidth: _angular_core.Signal; protected readonly isDeferLoading: _angular_core.Signal; protected readonly classes: _angular_core.Signal; protected readonly hostClasses: _angular_core.Signal; constructor(); ngOnDestroy(): void; isDestroyed(): boolean; getNativeElement(): HTMLElement; attachComponentPortal(portal: ComponentPortal): ComponentRef; attachTemplatePortal(portal: TemplatePortal): EmbeddedViewRef; onOkClick(): void; onCloseClick(): void; onBackdropClick(): void; open(): void; close(): void; private _createOverlay; private _openTemplateOverlay; private _closeWithAnimation; private _clearCloseTimeout; private _disposeTemplateOverlay; static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; static ɵcmp: _angular_core.ɵɵComponentDeclaration, "z-modal", ["zModal"], { "class": { "alias": "class"; "required": false; "isSignal": true; }; "zBodyClass": { "alias": "zBodyClass"; "required": false; "isSignal": true; }; "zVisible": { "alias": "zVisible"; "required": false; "isSignal": true; }; "zTitle": { "alias": "zTitle"; "required": false; "isSignal": true; }; "zDescription": { "alias": "zDescription"; "required": false; "isSignal": true; }; "zWidth": { "alias": "zWidth"; "required": false; "isSignal": true; }; "zClosable": { "alias": "zClosable"; "required": false; "isSignal": true; }; "zMaskClosable": { "alias": "zMaskClosable"; "required": false; "isSignal": true; }; "zDisableShadow": { "alias": "zDisableShadow"; "required": false; "isSignal": true; }; "zHeaderBorder": { "alias": "zHeaderBorder"; "required": false; "isSignal": true; }; "zFooterBorder": { "alias": "zFooterBorder"; "required": false; "isSignal": true; }; "zHideHeader": { "alias": "zHideHeader"; "required": false; "isSignal": true; }; "zHideFooter": { "alias": "zHideFooter"; "required": false; "isSignal": true; }; "zOkText": { "alias": "zOkText"; "required": false; "isSignal": true; }; "zCancelText": { "alias": "zCancelText"; "required": false; "isSignal": true; }; "zOkDestructive": { "alias": "zOkDestructive"; "required": false; "isSignal": true; }; "zOkDisabled": { "alias": "zOkDisabled"; "required": false; "isSignal": true; }; "zLoading": { "alias": "zLoading"; "required": false; "isSignal": true; }; "zContentLoading": { "alias": "zContentLoading"; "required": false; "isSignal": true; }; "zSkeletonRows": { "alias": "zSkeletonRows"; "required": false; "isSignal": true; }; "zOverlay": { "alias": "zOverlay"; "required": false; "isSignal": true; }; }, { "zOk": "zOk"; "zCancel": "zCancel"; "zAfterClose": "zAfterClose"; "zScrollbar": "zScrollbar"; "zVisible": "zVisibleChange"; }, ["customHeader", "customContent", "customFooter"], ["*"], true, never>; } declare class ZModalService { private readonly _overlay; private readonly _injector; private readonly _platformId; private readonly _zTranslate; private readonly _zIndexService; create(config: ZModalOptions): ZModalRef; show(options: ZModalConfirmOptions): ZModalRef; info(options: ZModalConfirmOptions): ZModalRef; warning(options: ZModalConfirmOptions): ZModalRef; danger(options: ZModalConfirmOptions): ZModalRef; private _confirmModal; private _open; private _createOverlay; private _attachModalContainer; private _attachModalContent; private _createInjector; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } declare const zModalVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string; export { ZModalComponent, ZModalContentDirective, ZModalFooterDirective, ZModalHeaderDirective, ZModalOptions, ZModalRef, ZModalService, Z_MODAL_DATA, zModalVariants }; export type { ZModalConfirmOptions, ZModalConfirmType, ZModalContentType, ZModalOnClickCallBack };