ng-angular-popup/index.d.ts

A modern, lightweight, and customizable toast notification library for Angular 18-22 with signals, zoneless support, and standalone components

import * as i0 from '@angular/core';
import { InjectionToken, OnInit, OnDestroy, EnvironmentProviders } from '@angular/core';

declare enum ToastType {
    PRIMARY = "toast-primary",
    SECONDARY = "toast-secondary",
    SUCCESS = "toast-success",
    INFO = "toast-info",
    WARNING = "toast-warning",
    DANGER = "toast-danger"
}

/**
 * Represents a toast notification message with various configuration options.
 */
declare class ToastMessage {
    message: string;
    type: ToastType;
    title?: string | undefined;
    duration: number;
    showProgress: boolean;
    dismissible: boolean;
    showIcon: boolean;
    /** Unique identifier for the toast message */
    id: number;
    /** Timestamp when the toast was created */
    createdAt: number;
    /**
     * Creates a new toast message instance.
     *
     * @param message The content of the toast message
     * @param type The visual type/style of the toast
     * @param title Optional title for the toast message
     * @param duration Time in milliseconds before auto-dismissal (0 for no auto-dismiss)
     * @param showProgress Whether to show the progress countdown bar
     * @param dismissible Whether the toast can be manually dismissed
     * @param showIcon Whether to show the icon
     */
    constructor(message: string, type: ToastType, title?: string | undefined, duration?: number, showProgress?: boolean, dismissible?: boolean, showIcon?: boolean);
}

/**
 * Toast position values as string literals
 */
declare const TOAST_POSITIONS: {
    readonly TOP_LEFT: "toaster-top-left";
    readonly TOP_CENTER: "toaster-top-center";
    readonly TOP_RIGHT: "toaster-top-right";
    readonly BOTTOM_LEFT: "toaster-bottom-left";
    readonly BOTTOM_CENTER: "toaster-bottom-center";
    readonly BOTTOM_RIGHT: "toaster-bottom-right";
};
/**
 * Type for toast positions
 */
type ToastPosition = typeof TOAST_POSITIONS[keyof typeof TOAST_POSITIONS];
/**
 * @deprecated Use TOAST_POSITIONS and ToastPosition instead
 */
declare const ToasterPosition: {
    readonly TOP_LEFT: "toaster-top-left";
    readonly TOP_CENTER: "toaster-top-center";
    readonly TOP_RIGHT: "toaster-top-right";
    readonly BOTTOM_LEFT: "toaster-bottom-left";
    readonly BOTTOM_CENTER: "toaster-bottom-center";
    readonly BOTTOM_RIGHT: "toaster-bottom-right";
};

/**
 * Global configuration options for ng-toast
 */
interface NgToastConfig {
    /**
     * Default duration for toast messages in milliseconds
     * @default 3000
     */
    duration?: number;
    /**
     * Default position for toast container
     * @default 'bottom-right'
     */
    position?: ToastPosition;
    /**
     * Maximum number of toasts to display at once
     * @default 5
     */
    maxToasts?: number;
    /**
     * Default width of toast container in pixels
     * @default 350
     */
    width?: number;
    /**
     * Minimum width of toast container in pixels
     * If not provided, min-width will not be applied
     */
    minWidth?: number;
    /**
     * Show progress bar by default
     * @default true
     */
    showProgress?: boolean;
    /**
     * Make toasts dismissible by default
     * @default true
     */
    dismissible?: boolean;
    /**
     * Show icon by default
     * @default true
     */
    showIcon?: boolean;
    /**
     * Enable animations
     * @default true
     */
    enableAnimations?: boolean;
}
/**
 * Default configuration for ng-toast
 */
declare const DEFAULT_TOAST_CONFIG: NgToastConfig;
/**
 * Injection token for ng-toast configuration
 */
declare const NG_TOAST_CONFIG: InjectionToken<NgToastConfig>;

declare class NgToastService {
    #private;
    /** Injected configuration */
    private config;
    /**
     * Signal that holds the current toast messages
     */
    toastMessages: i0.WritableSignal<ToastMessage[]>;
    /**
     * Callback for animation before removal
     */
    private beforeRemoveCallback?;
    /**
     * Constructs a new NgToastService instance.
     */
    constructor();
    /**
     * Get the global configuration
     */
    getConfig(): NgToastConfig;
    /**
     * Displays a toast message.
     * @param message The message to display.
     * @param type The type of the toast message.
     * @param title The optional title of the toast message.
     * @param duration The duration in milliseconds for which the toast message should be displayed. Defaults to the default duration.
     * @param showProgress Whether to show the progress bar. Defaults to true.
     * @param dismissible Whether the toast can be manually dismissed. Defaults to true.
     */
    toast(message: string, type: ToastType, title?: string, duration?: number, showProgress?: boolean, dismissible?: boolean, showIcon?: boolean): void;
    /**
     * Displays a success toast message.
     * @param message The message to display.
     * @param title The optional title of the toast message.
     * @param duration The duration in milliseconds for which the toast message should be displayed. Defaults to the default duration.
     * @param showProgress Whether to show the progress bar. Defaults to true.
     * @param dismissible Whether the toast can be manually dismissed. Defaults to true.
     */
    success(message: string, title?: string, duration?: number, showProgress?: boolean, dismissible?: boolean, showIcon?: boolean): void;
    /**
     * Displays an info toast message.
     * @param message The message to display.
     * @param title The optional title of the toast message.
     * @param duration The duration in milliseconds for which the toast message should be displayed. Defaults to the default duration.
     * @param showProgress Whether to show the progress bar. Defaults to true.
     * @param dismissible Whether the toast can be manually dismissed. Defaults to true.
     */
    info(message: string, title?: string, duration?: number, showProgress?: boolean, dismissible?: boolean, showIcon?: boolean): void;
    /**
     * Displays a warning toast message.
     * @param message The message to display.
     * @param title The optional title of the toast message.
     * @param duration The duration in milliseconds for which the toast message should be displayed. Defaults to the default duration.
     * @param showProgress Whether to show the progress bar. Defaults to true.
     * @param dismissible Whether the toast can be manually dismissed. Defaults to true.
     */
    warning(message: string, title?: string, duration?: number, showProgress?: boolean, dismissible?: boolean, showIcon?: boolean): void;
    /**
     * Displays a danger/error toast message.
     * @param message The message to display.
     * @param title The optional title of the toast message.
     * @param duration The duration in milliseconds for which the toast message should be displayed. Defaults to the default duration.
     * @param showProgress Whether to show the progress bar. Defaults to true.
     * @param dismissible Whether the toast can be manually dismissed. Defaults to true.
     */
    danger(message: string, title?: string, duration?: number, showProgress?: boolean, dismissible?: boolean, showIcon?: boolean): void;
    /**
     * Displays a primary toast message.
     * @param message The message to display.
     * @param title The optional title of the toast message.
     * @param duration The duration in milliseconds for which the toast message should be displayed. Defaults to the default duration.
     * @param showProgress Whether to show the progress bar. Defaults to true.
     * @param dismissible Whether the toast can be manually dismissed. Defaults to true.
     */
    primary(message: string, title?: string, duration?: number, showProgress?: boolean, dismissible?: boolean, showIcon?: boolean): void;
    /**
     * Displays a secondary toast message.
     * @param message The message to display.
     * @param title The optional title of the toast message.
     * @param duration The duration in milliseconds for which the toast message should be displayed. Defaults to the default duration.
     * @param showProgress Whether to show the progress bar. Defaults to true.
     * @param dismissible Whether the toast can be manually dismissed. Defaults to true.
     */
    secondary(message: string, title?: string, duration?: number, showProgress?: boolean, dismissible?: boolean, showIcon?: boolean): void;
    /**
     * Set callback for before remove (used by component for animations)
     */
    setBeforeRemoveCallback(callback: (messageId: number) => void): void;
    /**
     * Removes a toast message from the list
     * @param messageId The ID of the message to remove
     */
    removeToast(messageId: number): void;
    /**
     * Removes a toast with animation
     */
    private removeWithAnimation;
    /**
     * Removes all toast messages
     */
    clearAll(): void;
    /**
     * Updates the progress bars by triggering a signal update
     * This is used by the component to refresh progress bars
     */
    updateProgress(): void;
    /**
     * Sets the maximum number of toasts to display at once
     * @param max The maximum number of toasts
     */
    setMaxToasts(max: number): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgToastService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<NgToastService>;
}

declare class NgToastComponent implements OnInit, OnDestroy {
    private toastService;
    private config;
    /**
     * Input signal for the position of the toast container
     */
    position: i0.InputSignal<ToastPosition>;
    /**
     * Input signal for the width of the toast container in pixels
     */
    width: i0.InputSignal<number>;
    /**
     * Input signal for the minimum width of the toast container in pixels
     * If not provided, min-width will not be applied
     */
    minWidth: i0.InputSignal<number | undefined>;
    /**
     * Signal to track progress update intervals
     */
    private progressInterval;
    /**
     * Signal to track toasts that are leaving (for exit animation)
     */
    private leavingToasts;
    /**
     * Computed signal that gets the messages from the service
     */
    messages: i0.Signal<ToastMessage[]>;
    /**
     * Check if a toast is leaving
     */
    isLeaving(messageId: number): boolean;
    constructor(toastService: NgToastService);
    ngOnInit(): void;
    /**
     * Calculates the progress width percentage for a toast message
     * @param message The toast message
     * @returns The progress width as a percentage (0-100)
     */
    getProgressWidth(message: ToastMessage): number;
    /**
     * Gets the appropriate color for the progress bar based on toast type
     * @param message The toast message
     * @returns CSS color value for the progress bar
     */
    getProgressColor(message: ToastMessage): string;
    /**
     * Clears the progress update interval
     */
    private clearProgressInterval;
    /**
     * Trigger leave animation for a toast
     */
    private triggerLeaveAnimation;
    /**
     * Removes a toast message with animation
     * @param message The message to remove
     */
    remove(message: ToastMessage): void;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgToastComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgToastComponent, "ng-toast", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * Directive that renders appropriate SVG icons for different toast types
 */
declare class ToastIconDirective implements OnInit {
    #private;
    /** Input signal for the toast type */
    type: i0.InputSignal<string>;
    ngOnInit(): void;
    /**
     * Sets the appropriate SVG icon based on toast type
     */
    setIcon(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ToastIconDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ToastIconDirective, "[toastIcon]", never, { "type": { "alias": "toastIcon"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * @deprecated Use standalone components and provideNgToast() instead
 * This module is kept for backward compatibility with Angular versions < 14
 *
 * Example usage with standalone components:
 * ```typescript
 * // In your app.config.ts
 * export const appConfig: ApplicationConfig = {
 *   providers: [
 *     provideNgToast(),
 *     // other providers...
 *   ]
 * };
 *
 * // In your component
 * @Component({
 *   // ...
 *   imports: [NgToastComponent],
 *   // ...
 * })
 * export class YourComponent {}
 * ```
 */
declare class NgToastModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<NgToastModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<NgToastModule, never, [typeof NgToastComponent, typeof ToastIconDirective], [typeof NgToastComponent, typeof ToastIconDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<NgToastModule>;
}

/**
 * Provides the NgToast service for standalone applications with optional configuration
 *
 * @param config Optional global configuration for toast notifications
 *
 * @example
 * ```typescript
 * // Basic usage
 * export const appConfig: ApplicationConfig = {
 *   providers: [
 *     provideNgToast(),
 *   ]
 * };
 *
 * // With custom configuration
 * export const appConfig: ApplicationConfig = {
 *   providers: [
 *     provideNgToast({
 *       duration: 5000,
 *       position: 'top-right',
 *       maxToasts: 3,
 *       showIcon: true,
 *       showProgress: true,
 *       dismissible: true,
 *       enableAnimations: true
 *     }),
 *   ]
 * };
 * ```
 */
declare function provideNgToast(config?: Partial<NgToastConfig>): EnvironmentProviders;

/**
 * Demo component showcasing the ng-toast library with Angular v20 and signals
 */
declare class NgToastDemoComponent {
    private toastService;
    TOAST_POSITIONS: {
        readonly TOP_LEFT: "toaster-top-left";
        readonly TOP_CENTER: "toaster-top-center";
        readonly TOP_RIGHT: "toaster-top-right";
        readonly BOTTOM_LEFT: "toaster-bottom-left";
        readonly BOTTOM_CENTER: "toaster-bottom-center";
        readonly BOTTOM_RIGHT: "toaster-bottom-right";
    };
    currentPosition: ToastPosition;
    duration: number;
    showProgress: boolean;
    dismissible: boolean;
    customTitle: string;
    customMessage: string;
    toastTypes: ToastType[];
    constructor(toastService: NgToastService);
    showSuccess(): void;
    showInfo(): void;
    showWarning(): void;
    showDanger(): void;
    showPrimary(): void;
    showSecondary(): void;
    showCustomToast(type: string): void;
    clearAllToasts(): void;
    showMultipleToasts(): void;
    setPosition(position: ToastPosition): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<NgToastDemoComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<NgToastDemoComponent, "ng-toast-demo", never, {}, {}, never, never, true, never>;
}

export { DEFAULT_TOAST_CONFIG, NG_TOAST_CONFIG, NgToastComponent, NgToastDemoComponent, NgToastModule, NgToastService, TOAST_POSITIONS, ToastIconDirective, ToastMessage, ToastType, ToasterPosition, provideNgToast };
export type { NgToastConfig, ToastPosition };