ngx-toastr
Version:
<div align="center"> <img src="https://raw.githubusercontent.com/scttcper/ngx-toastr/master/misc/documentation-assets/ngx-toastr-example.png" width="300" alt="Angular Toastr"> <br> <h1>ngx-toastr</h1> <br> <a href="https://www.npmjs.org/package/
522 lines (506 loc) • 18.8 kB
TypeScript
import * as i0 from '@angular/core';
import { ViewContainerRef, Injector, ComponentRef, InjectionToken, NgZone, OnDestroy, ApplicationRef, ModuleWithProviders, EnvironmentProviders } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
declare class ToastContainerDirective {
private el;
getContainerElement(): HTMLElement;
static ɵfac: i0.ɵɵFactoryDeclaration<ToastContainerDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<ToastContainerDirective, "[toastContainer]", ["toastContainer"], {}, {}, never, never, true, never>;
}
type ComponentType<T> = new (...args: unknown[]) => T;
/**
* A `ComponentPortal` is a portal that instantiates some Component upon attachment.
*/
declare class ComponentPortal<T> {
private _attachedHost?;
/** The type of the component that will be instantiated for attachment. */
component: ComponentType<T>;
/**
* [Optional] Where the attached component should live in Angular's *logical* component tree.
* This is different from where the component *renders*, which is determined by the PortalHost.
* The origin necessary when the host is outside of the Angular application context.
*/
viewContainerRef: ViewContainerRef;
/** Injector used for the instantiation of the component. */
injector: Injector;
constructor(component: ComponentType<T>, injector: Injector);
/** Attach this portal to a host. */
attach(host: BasePortalHost, newestOnTop: boolean): ComponentRef<unknown>;
/** Detach this portal from its host */
detach(): void;
/** Whether this portal is attached to a host. */
get isAttached(): boolean;
/**
* Sets the PortalHost reference without performing `attach()`. This is used directly by
* the PortalHost when it is performing an `attach()` or `detach()`.
*/
setAttachedHost(host?: BasePortalHost): void;
}
/**
* Partial implementation of PortalHost that only deals with attaching a
* ComponentPortal
*/
declare abstract class BasePortalHost {
/** The portal currently attached to the host. */
private _attachedPortal?;
/** A function that will permanently dispose this host. */
private _disposeFn?;
attach(portal: ComponentPortal<unknown>, newestOnTop: boolean): ComponentRef<unknown>;
abstract attachComponentPortal<T>(portal: ComponentPortal<T>, newestOnTop: boolean): ComponentRef<T>;
detach(): void;
setDisposeFn(fn: () => void): void;
}
/**
* Reference to an overlay that has been created with the Overlay service.
* Used to manipulate or dispose of said overlay.
*/
declare class OverlayRef {
private _portalHost;
constructor(_portalHost: BasePortalHost);
attach(portal: ComponentPortal<unknown>, newestOnTop?: boolean): ComponentRef<unknown>;
/**
* Detaches an overlay from a portal.
* @returns Resolves when the overlay has been detached.
*/
detach(): void;
}
/**
* Reference to a toast opened via the Toastr service.
*/
declare class ToastRef<T> {
private _overlayRef;
/** The instance of component opened into the toast. */
componentInstance: T;
/** Count of duplicates of this toast */
private duplicatesCount;
/** Subject for notifying the user that the toast has finished closing. */
private _afterClosed;
/** triggered when toast is activated */
private _activate;
/** notifies the toast that it should close before the timeout */
private _manualClose;
/** notifies the toast that it should reset the timeouts */
private _resetTimeout;
/** notifies the toast that it should count a duplicate toast */
private _countDuplicate;
constructor(_overlayRef: OverlayRef);
manualClose(): void;
manualClosed(): Observable<unknown>;
timeoutReset(): Observable<unknown>;
countDuplicate(): Observable<number>;
/**
* Close the toast.
*/
close(): void;
/** Gets an observable that is notified when the toast is finished closing. */
afterClosed(): Observable<void>;
isInactive(): boolean;
activate(): void;
/** Gets an observable that is notified when the toast has started opening. */
afterActivate(): Observable<void>;
/** Reset the toast timouts and count duplicates */
onDuplicate(resetTimeout: boolean, countDuplicate: boolean): void;
}
type ProgressAnimationType = 'increasing' | 'decreasing';
type DisableTimoutType = boolean | 'timeOut' | 'extendedTimeOut';
/**
* Configuration for an individual toast.
*/
interface IndividualConfig<ConfigPayload = unknown> {
/**
* disable both timeOut and extendedTimeOut
* default: false
*/
disableTimeOut: DisableTimoutType;
/**
* toast time to live in milliseconds
* default: 5000
*/
timeOut: number;
/**
* toast show close button
* default: false
*/
closeButton: boolean;
/**
* time to close after a user hovers over toast
* default: 1000
*/
extendedTimeOut: number;
/**
* show toast progress bar
* default: false
*/
progressBar: boolean;
/**
* changes toast progress bar animation
* default: decreasing
*/
progressAnimation: ProgressAnimationType;
/**
* render html in toast message (possibly unsafe)
* default: false
*/
enableHtml: boolean;
/**
* css class on toast component
* default: ngx-toastr
*/
toastClass: string;
/**
* css class on toast container
* default: toast-top-right
*/
positionClass: string;
/**
* css class on toast title
* default: toast-title
*/
titleClass: string;
/**
* css class on toast message
* default: toast-message
*/
messageClass: string;
/**
* animation easing on toast
* default: ease-in
*/
easing: string;
/**
* animation ease time on toast
* default: 300
*/
easeTime: string | number;
/**
* clicking on toast dismisses it
* default: true
*/
tapToDismiss: boolean;
/**
* Angular toast component to be shown
* default: Toast
*/
toastComponent?: ComponentType<unknown>;
/**
* Helps show toast from a websocket or from event outside Angular
* default: false
*/
onActivateTick: boolean;
/**
* New toast placement
* default: true
*/
newestOnTop: boolean;
/**
* Payload to pass to the toast component
*/
payload?: ConfigPayload;
}
interface ToastrIconClasses {
error: string;
info: string;
success: string;
warning: string;
[key: string]: string;
}
/**
* Global Toast configuration
* Includes all IndividualConfig
*/
interface GlobalConfig<C = unknown> extends IndividualConfig<C> {
/**
* max toasts opened. Toasts will be queued
* Zero is unlimited
* default: 0
*/
maxOpened: number;
/**
* dismiss current toast when max is reached
* default: false
*/
autoDismiss: boolean;
iconClasses: Partial<ToastrIconClasses>;
/**
* block duplicate messages
* default: false
*/
preventDuplicates: boolean;
/**
* display the number of duplicate messages
* default: false
*/
countDuplicates: boolean;
/**
* Reset toast timeout when there's a duplicate (preventDuplicates needs to be set to true)
* default: false
*/
resetTimeoutOnDuplicate: boolean;
/**
* consider the title of a toast when checking if duplicate
* default: false
*/
includeTitleDuplicates: boolean;
}
/**
* Everything a toast needs to launch
*/
declare class ToastPackage<ConfigPayload = unknown> {
toastId: number;
config: IndividualConfig<ConfigPayload>;
message: string | null | undefined;
title: string | undefined;
toastType: string;
toastRef: ToastRef<unknown>;
private _onTap;
private _onAction;
constructor(toastId: number, config: IndividualConfig<ConfigPayload>, message: string | null | undefined, title: string | undefined, toastType: string, toastRef: ToastRef<unknown>);
/** Fired on click */
triggerTap(): void;
onTap(): Observable<void>;
/** available for use in custom toast */
triggerAction(action?: unknown): void;
onAction(): Observable<unknown>;
}
declare const DefaultNoComponentGlobalConfig: GlobalConfig;
interface ToastToken {
default: GlobalConfig;
config: Partial<GlobalConfig>;
}
declare const TOAST_CONFIG: InjectionToken<ToastToken>;
interface ActiveToast<C> {
/** Your Toast ID. Use this to close it individually */
toastId: number;
/** the title of your toast. Stored to prevent duplicates */
title: string;
/** the message of your toast. Stored to prevent duplicates */
message: string;
/** a reference to the component see portal.ts */
portal: ComponentRef<C>;
/** a reference to your toast */
toastRef: ToastRef<C>;
/** triggered when toast is active */
onShown: Observable<void>;
/** triggered when toast is destroyed */
onHidden: Observable<void>;
/** triggered on toast click */
onTap: Observable<void>;
/** available for your use in custom toast */
onAction: Observable<unknown>;
}
declare class ToastrService {
private overlay;
private _injector;
private sanitizer;
private ngZone;
toastrConfig: GlobalConfig;
currentlyActive: number;
toasts: ActiveToast<unknown>[];
overlayContainer?: ToastContainerDirective;
previousToastMessage: string | undefined;
private index;
constructor();
/** show toast */
show<C extends ToastBase = ToastBase, ConfigPayload = unknown>(message?: string, title?: string, override?: Partial<IndividualConfig<ConfigPayload>>, type?: string): ActiveToast<C> | null;
/** show successful toast */
success<ConfigPayload = unknown>(message?: string, title?: string, override?: Partial<IndividualConfig<ConfigPayload>>): ActiveToast<unknown>;
/** show error toast */
error<ConfigPayload = unknown>(message?: string, title?: string, override?: Partial<IndividualConfig<ConfigPayload>>): ActiveToast<unknown>;
/** show info toast */
info<ConfigPayload = unknown>(message?: string, title?: string, override?: Partial<IndividualConfig<ConfigPayload>>): ActiveToast<unknown>;
/** show warning toast */
warning<ConfigPayload = unknown>(message?: string, title?: string, override?: Partial<IndividualConfig<ConfigPayload>>): ActiveToast<unknown>;
/**
* Remove all or a single toast by id
*/
clear(toastId?: number): void;
/**
* Remove and destroy a single toast by id
*/
remove(toastId: number): boolean;
/**
* Determines if toast message is already shown
*/
findDuplicate(title: string, message: string, resetOnDuplicate: boolean, countDuplicates: boolean): ActiveToast<unknown>;
/** create a clone of global config and apply individual settings */
private applyConfig;
/**
* Find toast object by id
*/
private _findToast;
/**
* Determines the need to run inside angular's zone then builds the toast
*/
private _preBuildNotification;
/**
* Creates and attaches toast data to component
* returns the active toast, or in case preventDuplicates is enabled the original/non-duplicate active toast.
*/
private _buildNotification;
static ɵfac: i0.ɵɵFactoryDeclaration<ToastrService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<ToastrService>;
}
declare class TimeoutsService {
protected ngZone?: NgZone;
setInterval(func: () => unknown, timeout: number): number;
setTimeout(func: () => unknown, timeout?: number): number;
protected runInsideAngular(func: () => unknown): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TimeoutsService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<TimeoutsService>;
}
declare class ToastBase<ConfigPayload = unknown> implements OnDestroy {
toastPackage: ToastPackage<any>;
protected toastrService: ToastrService;
protected appRef: ApplicationRef;
protected timeoutsService: TimeoutsService;
duplicatesCount: number;
protected hideTime: number;
/** width of progress bar */
readonly width: i0.WritableSignal<number>;
readonly state: i0.WritableSignal<"inactive" | "active" | "removed">;
/** hides component when waiting to be displayed */
readonly displayStyle: i0.Signal<string>;
readonly message: i0.Signal<string>;
readonly title: i0.Signal<string>;
readonly options: i0.WritableSignal<IndividualConfig<ConfigPayload>>;
readonly originalTimeout: i0.Signal<number>;
readonly toastClasses: i0.Signal<string>;
protected timeout: number | undefined;
protected intervalId: number | undefined;
protected afterActivateSubscription: Subscription;
protected manualClosedSubscription: Subscription;
protected timeoutResetSubscription: Subscription;
protected countDuplicateSubscription: Subscription;
constructor();
ngOnDestroy(): void;
/**
* activates toast and sets timeout
*/
activateToast(): void;
/**
* updates progress bar width
*/
updateProgress(): void;
resetTimeout(): void;
/**
* tells toastrService to remove this toast after animation time
*/
remove(): void;
tapToast(): void;
stickAround(): void;
delayedHideToast(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<ToastBase<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ToastBase<any>, "[toast-component]", never, {}, {}, never, never, true, never>;
}
declare class Toast<ConfigPayload = unknown> extends ToastBase<ConfigPayload> {
readonly params: {
easeTime: string | number;
easing: string;
};
private elementRef;
remove(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<Toast<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<Toast<any>, "[toast-component]", never, {}, {}, never, never, true, never>;
}
declare class ToastrModule {
static forRoot(config?: Partial<GlobalConfig>): ModuleWithProviders<ToastrModule>;
static ɵfac: i0.ɵɵFactoryDeclaration<ToastrModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ToastrModule, never, [typeof Toast], [typeof Toast]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ToastrModule>;
}
declare class ToastrComponentlessModule {
static forRoot(config?: Partial<GlobalConfig>): ModuleWithProviders<ToastrModule>;
static ɵfac: i0.ɵɵFactoryDeclaration<ToastrComponentlessModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ToastrComponentlessModule, never, never, never>;
static ɵinj: i0.ɵɵInjectorDeclaration<ToastrComponentlessModule>;
}
declare const DefaultGlobalConfig: GlobalConfig;
/**
* @description
* Provides the `TOAST_CONFIG` token with the given config.
*
* @param config The config to configure toastr.
* @returns The environment providers.
*
* @example
* ```ts
* import { provideToastr } from 'ngx-toastr';
*
* bootstrap(AppComponent, {
* providers: [
* provideToastr({
* timeOut: 2000,
* positionClass: 'toast-top-right',
* }),
* ],
* })
*/
declare const provideToastr: (config?: Partial<GlobalConfig>) => EnvironmentProviders;
declare const DefaultNoAnimationsGlobalConfig: GlobalConfig;
declare class ToastNoAnimationModule {
static forRoot(config?: Partial<GlobalConfig>): ModuleWithProviders<ToastNoAnimationModule>;
static ɵfac: i0.ɵɵFactoryDeclaration<ToastNoAnimationModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<ToastNoAnimationModule, never, [typeof ToastBase], [typeof ToastBase]>;
static ɵinj: i0.ɵɵInjectorDeclaration<ToastNoAnimationModule>;
}
/**
* Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be
* used as a low-level building building block for other components. Dialogs, tooltips, menus,
* selects, etc. can all be built using overlays. The service should primarily be used by authors
* of re-usable components rather than developers building end-user applications.
*
* An overlay *is* a PortalHost, so any kind of Portal can be loaded into one.
*/
declare class Overlay {
private _overlayContainer;
private _appRef;
private _document;
private _paneElements;
/**
* Creates an overlay.
* @returns A reference to the created overlay.
*/
create(positionClass?: string, overlayContainer?: ToastContainerDirective): OverlayRef;
getPaneElement(positionClass?: string, overlayContainer?: ToastContainerDirective): HTMLElement;
/**
* Creates the DOM element for an overlay and appends it to the overlay container.
* @returns Newly-created pane element
*/
private _createPaneElement;
/**
* Create a DomPortalHost into which the overlay content can be loaded.
* @param pane The DOM element to turn into a portal host.
* @returns A portal host for the given DOM element.
*/
private _createPortalHost;
/**
* Creates an OverlayRef for an overlay in the given DOM element.
* @param pane DOM element for the overlay
*/
private _createOverlayRef;
static ɵfac: i0.ɵɵFactoryDeclaration<Overlay, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<Overlay>;
}
/** Container inside which all toasts will render. */
declare class OverlayContainer implements OnDestroy {
protected _document: Document;
protected _containerElement: HTMLElement;
ngOnDestroy(): void;
/**
* This method returns the overlay container element. It will lazily
* create the element the first time it is called to facilitate using
* the container in non-browser environments.
* @returns the container element
*/
getContainerElement(): HTMLElement;
/**
* Create the overlay container element, which is simply a div
* with the 'cdk-overlay-container' class on the document body
* and 'aria-live="polite"'
*/
protected _createContainer(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<OverlayContainer, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<OverlayContainer>;
}
export { BasePortalHost, ComponentPortal, DefaultGlobalConfig, DefaultNoAnimationsGlobalConfig, DefaultNoComponentGlobalConfig, Overlay, OverlayContainer, OverlayRef, TOAST_CONFIG, Toast, ToastContainerDirective, ToastBase as ToastNoAnimation, ToastNoAnimationModule, ToastPackage, ToastRef, ToastrComponentlessModule, ToastrModule, ToastrService, provideToastr };
export type { ActiveToast, ComponentType, DisableTimoutType, GlobalConfig, IndividualConfig, ProgressAnimationType, ToastToken, ToastrIconClasses };