ngx-french-toast
Version:
<p align="center"> <img src="./projects/ngx-french-toast/logo.png" alt="ngx-french-toast logo" width="200px" /> </p>
305 lines (296 loc) • 10.2 kB
TypeScript
import * as i0 from '@angular/core';
import { Type, ModuleWithProviders, OnInit, AfterViewInit, OnDestroy, ViewContainerRef, EnvironmentProviders } from '@angular/core';
import * as ngx_french_toast from 'ngx-french-toast';
declare enum ToastPosition {
TOP_RIGHT = "top-right",
BOTTOM_RIGHT = "bottom-right",
TOP_LEFT = "top-left",
BOTTOM_LEFT = "bottom-left"
}
declare enum ToastType {
SUCCESS = "success",
DANGER = "danger",
WARNING = "warning",
INFO = "info"
}
/**
* Configuration options for customizing toast behavior and appearance.
*/
interface ToastConfig {
/**
* The screen position for displaying toasts.
* @type {ToastPosition}
* @default {ToastPosition.BOTTOM_RIGHT}
*/
position?: ToastPosition | undefined;
/**
* The default duration time for toasts in milliseconds.
* @type {number}
* @default 7000
*/
defaultDuration?: number | undefined;
/**
* Colors configuration for different types of toasts.
*/
colors?: {
/**
* The background color of the success toast.
* Accepts formats such as '#ffffff', '#fff', 'white', or 'linear-gradient(45deg, rgb(0, 0, 0), rgb(58 58 58))'.
* @type {string}
*/
success?: string | undefined;
/**
* The text color of the success toast.
* @type {string}
* @default '#ffffff'
*/
successText?: string | undefined;
/**
* The background color of the danger toast.
* Accepts formats such as '#ffffff', '#fff', 'white', or 'linear-gradient(45deg, rgb(0, 0, 0), rgb(58 58 58))'.
* @type {string}
*/
danger?: string | undefined;
/**
* The text color of the danger toast.
* @type {string}
* @default '#ffffff'
*/
dangerText?: string | undefined;
/**
* The background color of the warning toast.
* Accepts formats such as '#ffffff', '#fff', 'white', or 'linear-gradient(45deg, rgb(0, 0, 0), rgb(58 58 58))'.
* @type {string}
*/
warning?: string | undefined;
/**
* The text color of the warning toast.
* @type {string}
* @default '#ffffff'
*/
warningText?: string | undefined;
/**
* The background color of the info toast.
* Accepts formats such as '#ffffff', '#fff', 'white', or 'linear-gradient(45deg, rgb(0, 0, 0), rgb(58 58 58))'.
* @type {string}
*/
info?: string | undefined;
/**
* The text color of the info toast.
* @type {string}
* @default '#ffffff'
*/
infoText?: string | undefined;
/**
* The color of the time bar associated with the toast.
* Accepts formats such as '#ffffff', '#fff', 'white', or 'linear-gradient(45deg, rgb(0, 0, 0), rgb(58 58 58))'.
* @type {string}
*/
timebar?: string | undefined;
/**
* Determines whether the background should feature an automatically generated gradient or not.
* @type {boolean}
* @default false
*
* This option allows for dynamic and visually appealing background variations based on one specific color input.
* Please note that the `autoGradient` feature is compatible only with hex color codes consisting of 6 digits.
*/
autoGradient?: boolean | undefined;
} | undefined;
/**
* Controls the maximum number of toasts displayed on the screen simultaneously.
* @type {number}
* @default 3
* @description Set this property to limit the concurrent display of toasts on the screen. Adjusting the limit can help manage visual clutter and ensure a user-friendly experience by restricting the number of simultaneous notifications.
*/
limit?: number | undefined;
/**
* Font styling options for the toast title and content.
*/
font?: {
/**
* Font family for both title and content.
* @type {string}
* @default 'sans-serif'
*/
family?: string | undefined;
/**
* The title font-size.
* @type {string}
* @default '1.2rem'
*/
titleFontSize?: string | undefined;
/**
* The content font-size.
* @type {string}
* @default '1rem'
*/
contentFontSize?: string | undefined;
};
}
/**
* Input model for creating a new toast.
*/
interface ToastInputModel {
/**
* The title of the toast.
* @type {string}
*/
title: string;
/**
* The content of the toast.
* @type {string | null}
*/
content?: string | null;
/**
* The duration of the toast in milliseconds.
* @type {number | null}
*/
duration?: number | null;
/**
* The unique identifier for the toast. If blank, it will be automatically generated.
* @type {string}
*/
_id?: string;
/**
* The icon associated with the toast.
* @type {string | null}
*/
icon?: string | null;
/**
* A dynamically imported component within the toast.
* @type {Type<any>}
*/
component?: Type<any>;
/**
* Whether or not the toast should persist indefinitely.
* @type {boolean}
* @default false
*/
infinite?: boolean;
/**
* When set to true, this toast will remain fixed in its position even if new toasts are added, unless the next toast is also pinned.
* @type {boolean}
* @default false
*/
pinned?: boolean;
/**
* Data to be passed into the dynamically imported component.
* @type {any}
*/
context?: any;
}
/**
* Model representing a toast with additional properties for internal tracking.
*/
interface ToastModel extends ToastInputModel {
/**
* Indicates whether the toast is currently visible.
* @type {boolean}
*/
isVisible: boolean;
/**
* The type of the toast, such as 'success', 'danger', 'info', or 'warning'.
* @type {'success' | 'danger' | 'info' | 'warning'}
*/
type: 'success' | 'danger' | 'info' | 'warning';
/**
* Unique ID used to destroy parent Toast when using an embedded component. Automatically generated. Please don't pass any values to this property.
* @type {string}
*/
_uId: string;
/** @internal */
_markedForRemoval?: boolean;
}
declare class ToastService {
private readonly config;
private readonly overlay;
private readonly toastsContainer;
private readonly _toasts;
private readonly defaultDuration;
private overlayRef;
/** Read-only view of active toasts — consumed by ToastsComponent. */
readonly toasts: i0.Signal<ToastModel[]>;
constructor();
success(toastInput: ToastInputModel): void;
danger(toastInput: ToastInputModel): void;
info(toastInput: ToastInputModel): void;
warning(toastInput: ToastInputModel): void;
clearAllToasts(): void;
destroyToast(toastComponent: {
toast(): {
_uId: string;
};
}): void;
/**
* @internal — called by ToastComponent after its exit animation completes.
*/
remove(uid: string): void;
private add;
private createOverlay;
private generateId;
static ɵfac: i0.ɵɵFactoryDeclaration<ToastService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<ToastService>;
}
declare class FrenchToastModule {
static forRoot(config?: Partial<ToastConfig>): ModuleWithProviders<FrenchToastModule>;
static ɵfac: i0.ɵɵFactoryDeclaration<FrenchToastModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<FrenchToastModule, never, never, never>;
static ɵinj: i0.ɵɵInjectorDeclaration<FrenchToastModule>;
}
declare class ToastsComponent {
private readonly toastService;
private readonly config;
readonly toasts: i0.Signal<ngx_french_toast.ToastModel[]>;
readonly position: ToastPosition;
readonly bottomRight = ToastPosition.BOTTOM_RIGHT;
readonly bottomLeft = ToastPosition.BOTTOM_LEFT;
readonly topRight = ToastPosition.TOP_RIGHT;
readonly topLeft = ToastPosition.TOP_LEFT;
readonly style: string;
constructor();
private buildStyles;
static ɵfac: i0.ɵɵFactoryDeclaration<ToastsComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ToastsComponent, "french-toast", never, {}, {}, never, never, true, never>;
}
declare class ToastComponent implements OnInit, AfterViewInit, OnDestroy {
private readonly config;
private readonly toastService;
onClick(event: MouseEvent): void;
readonly container: i0.Signal<ViewContainerRef>;
readonly toast: i0.InputSignal<ToastModel>;
isVisible: i0.WritableSignal<boolean>;
duration: number;
private remainingTime;
timeout: ReturnType<typeof setTimeout> | undefined;
private resumeTime;
private componentRef;
svgUrlIsFromSprite: boolean;
readonly position: ToastPosition;
readonly bottomRight = ToastPosition.BOTTOM_RIGHT;
readonly bottomLeft = ToastPosition.BOTTOM_LEFT;
readonly topRight = ToastPosition.TOP_RIGHT;
readonly topLeft = ToastPosition.TOP_LEFT;
timebarColor: {
background: string;
} | undefined;
textColor: string;
style: string;
constructor();
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
dismiss(): void;
onMouseEnter(): void;
onMouseLeave(): void;
private createDynamicToast;
private getColors;
private getToastStyle;
private getToastTextColor;
private getTimebarColor;
static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "toast", never, { "toast": { "alias": "toast"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}
declare const provideFrenchToast: (config?: Partial<ToastConfig>) => EnvironmentProviders;
export { FrenchToastModule, ToastComponent, ToastPosition, ToastService, ToastType, ToastsComponent, provideFrenchToast };
export type { ToastConfig, ToastInputModel, ToastModel };