hot-toast-bokzor/index.d.ts

Smoking hot Notifications for Angular. Lightweight, customizable and beautiful by default.

import { Content } from '@ngneat/overview';
import { Observable } from 'rxjs';
import * as i0 from '@angular/core';
import { Injector, EnvironmentProviders, OnInit, AfterViewInit, OnDestroy, OnChanges, DoCheck, EventEmitter, SimpleChanges, QueryList, InjectionToken } from '@angular/core';

type ToastStacking = 'vertical' | 'depth';
declare class ToastConfig implements DefaultToastOptions {
    /**
     * Sets the reverse order for hot-toast stacking
     *
     * @default false
     */
    reverseOrder: boolean;
    /**
     * Sets the number of toasts visible.
     * 0 will set no limit.
     * @default 5
     * @since 6.1.0
     */
    visibleToasts: number;
    /**
     * Sets the type of stacking
     * @default "vertical"
     * @since 6.1.0
     */
    stacking: ToastStacking;
    ariaLive: ToastAriaLive;
    role: ToastRole;
    position: ToastPosition;
    className: string;
    closeStyle: Record<string, string>;
    dismissible: boolean;
    autoClose: boolean;
    duration: number;
    icon: Content;
    iconTheme: IconTheme;
    style: Record<string, string>;
    theme: ToastTheme;
    attributes: Record<string, string>;
    info: ToastOptions<unknown> & {
        content?: Content;
    };
    success: ToastOptions<unknown> & {
        content?: Content;
    };
    error: ToastOptions<unknown> & {
        content?: Content;
    };
    loading: ToastOptions<unknown> & {
        content?: Content;
    };
    blank: ToastOptions<unknown> & {
        content?: Content;
    };
    warning: ToastOptions<unknown> & {
        content?: Content;
    };
}
type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'warning' | 'info';
type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
type IconTheme = {
    primary: string;
    secondary?: string;
};
type ToastTheme = 'toast' | 'snackbar';
type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
declare const resolveValueOrFunction: <TValue, TArg>(valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg) => TValue;
type ToastRole = 'status' | 'alert';
type ToastAriaLive = 'assertive' | 'off' | 'polite';
interface HotToastGroupChild {
    options: ToastOptions<unknown> & {
        type?: ToastType;
        message: Content;
    };
}
interface Toast<DataType> {
    type: ToastType;
    /**
     * Unique id to associate with hot-toast.
     * There can't be multiple hot-toasts opened with same id.
     *
     * @default HotToastService.nextId
     */
    id: string;
    /** The message to show in the hot-toast. */
    message: Content | undefined;
    /**
     * Role of the live region.
     *
     * @default status
     */
    role: ToastRole;
    /** aria-live value for the live region.
     *
     * @default polite
     */
    ariaLive: ToastAriaLive;
    /**Icon to show in the hot-toast */
    icon?: Content;
    /**
     * Duration in milliseconds after which hot-toast will be auto closed.
     * Can be disabled via `autoClose: false`
     *
     * @default 3000 | error = 4000 | loading = 30000
     */
    duration?: number;
    /**
     * Show close button in hot-toast
     *
     * @default false
     */
    dismissible?: boolean;
    /**
     * Auto close hot-toast after duration
     *
     * @default true
     */
    autoClose?: boolean;
    /**Extra styles to apply for hot-toast */
    style?: Record<string, string>;
    /**Extra CSS classes to be added to the hot toast container. */
    className?: string;
    /**Extra attribute to be added to the hot toast container. */
    attributes?: Record<string, string>;
    /**Use this to change icon color */
    iconTheme?: IconTheme;
    /**
     * Visual appearance of hot-toast
     *
     * @default toast
     */
    theme?: ToastTheme;
    /**
     * The position to place the hot-toast.
     *
     *  @default top-center
     */
    position?: ToastPosition;
    /**Extra styles to apply for close button */
    closeStyle?: Record<string, string>;
    createdAt: number;
    visible: boolean;
    height?: number;
    observableMessages?: ObservableMessages<unknown, DataType>;
    /**
     * Useful when you want to keep a persistance for toast based on ids, across sessions.
     *
     * @example
     * // Lets say you want show hot-toast, with a particular id,
     * // max 3 times to a user irrespective of browser session.
     * // In this case you will set this as:
     * { enabled: true, count: 3 }
     *
     * @type {ToastPersistConfig}
     */
    persist?: ToastPersistConfig;
    /**
     * Allows you to pass injector for your component
     *
     * @since 1.1.0
     * @type {Injector}
     * @memberof Toast
     */
    injector?: Injector;
    /**
     * Allows you to pass data for your component/template
     *
     * @type {DataType}
     * @memberof Toast
     */
    data?: DataType;
    /**
     * Allows you to set group options
     * @since 1.1.0
     */
    group?: {
        /**
         * Show group expand/collapse button in hot-toast
         *
         * @default false
         */
        expandAndCollapsible?: boolean;
        /**Extra styles to apply for expand/collapse button */
        btnStyle?: Record<string, string>;
        /**Extra CSS classes to be added to the hot toast container. */
        className?: string;
        /**
         * Child items to render as grouped
         */
        children?: HotToastGroupChild[];
        /**
         * Parent toast ref to be passed with newly created toast,
         * and if it needs to grouped under an existing toast
         */
        parent?: CreateHotToastRef<unknown>;
    };
}
type ToastOptions<DataType> = Partial<Pick<Toast<DataType>, 'id' | 'icon' | 'duration' | 'dismissible' | 'autoClose' | 'role' | 'ariaLive' | 'className' | 'style' | 'iconTheme' | 'theme' | 'position' | 'closeStyle' | 'persist' | 'injector' | 'data' | 'attributes' | 'group'>>;
type DefaultToastOptions = ToastOptions<unknown> & {
    [key in ToastType]?: ToastOptions<unknown> & {
        content?: Content;
    };
};
type ObservableLoading<DataType> = {
    content: Content;
} & ToastOptions<DataType>;
type ObservableSuccessOrError<T, DataType> = {
    content: ValueOrFunction<Content, T>;
} & ToastOptions<DataType>;
type ObservableMessages<T, DataType> = {
    loading?: Content | ObservableLoading<DataType>;
    success?: ValueOrFunction<Content, T> | ObservableSuccessOrError<T, DataType>;
    error?: ValueOrFunction<Content, unknown> | ObservableSuccessOrError<unknown, DataType>;
};
interface HotToastServiceMethods {
    show<DataType>(message?: Content, options?: ToastOptions<DataType>): CreateHotToastRef<DataType | unknown>;
    error<DataType>(message?: Content, options?: ToastOptions<DataType>): CreateHotToastRef<DataType | unknown>;
    success<DataType>(message?: Content, options?: ToastOptions<DataType>): CreateHotToastRef<DataType | unknown>;
    loading<DataType>(message?: Content, options?: ToastOptions<DataType>): CreateHotToastRef<DataType | unknown>;
    warning<DataType>(message?: Content, options?: ToastOptions<DataType>): CreateHotToastRef<DataType | unknown>;
    observe<T, DataType>(messages: ObservableMessages<T, DataType>): (source: Observable<T>) => Observable<T>;
    close(id?: string): void;
}
type UpdateToastOptions<DataType> = Partial<Pick<Toast<DataType>, 'icon' | 'duration' | 'dismissible' | 'className' | 'style' | 'iconTheme' | 'type' | 'theme' | 'closeStyle'>>;
interface HotToastRefProps<DataType> {
    /** Returns all the toast options */
    getToast: () => Toast<DataType>;
    dispose: () => void;
    /**Updates only message */
    updateMessage: (message: Content) => void;
    /**Update updatable options of toast */
    updateToast: (options: UpdateToastOptions<DataType>) => void;
    /** Observable for notifying the user that the toast has been closed. */
    afterClosed: Observable<HotToastClose>;
    /** Observable for notifying the user that the group has been toggled. */
    afterGroupToggled: Observable<HotToastGroupEvent>;
    /** Observable for notifying the user that all the toastRefs for groups has been attached. */
    afterGroupRefsAttached: Observable<CreateHotToastRef<unknown>[]>;
    /**Closes the toast */
    close: (closeData?: {
        dismissedByAction: boolean;
    }) => void;
    data: DataType;
    /**
     * List of group toast refs
     * @since 1.1.0
     */
    readonly groupRefs: CreateHotToastRef<unknown>[];
    /**
     * Whether group panel is expanded
     * @since 1.1.0
     */
    readonly groupExpanded: boolean;
    /**
     * Expand or collapse group
     * @since 1.1.0
     */
    toggleGroup: (eventData?: {
        byAction: boolean;
    }) => void;
    show: () => void;
}
/** Event that is emitted when a toast is dismissed. */
interface HotToastClose {
    /** Whether the toast was dismissed using the action button. */
    dismissedByAction: boolean;
    id: string;
}
/** Event that is emitted when a toast is expanded or collapsed. */
interface HotToastGroupEvent {
    /** Whether the toast was expanded or collapsed using the action button. */
    byAction: boolean;
    id: string;
    event: 'collapse' | 'expand';
}
declare class ToastPersistConfig {
    /**
     *In which storage id vs. counts should be stored
     *
     * @type {('local' | 'session')}
     * @memberof ToastPersistConfig
     * @default 'local'
     */
    storage?: 'local' | 'session';
    /**
     *The key pattern to store object in storage. `${id}` in pattern is replaced with actual toast id.
     *
     * @type {('local' | 'session')}
     * @memberof ToastPersistConfig
     * @default 'ngxpert/hottoast-${id}'
     */
    key?: string;
    /**
     *The number of toasts allowed to show.
     *
     * @memberof ToastPersistConfig
     * @default 1
     */
    count?: number;
    enabled: boolean;
}
type AddToastRef<DataType> = Pick<HotToastRefProps<DataType>, 'afterClosed' | 'dispose' | 'updateMessage' | 'updateToast' | 'afterGroupToggled' | 'afterGroupRefsAttached'>;
type CreateHotToastRef<DataType> = Omit<Omit<HotToastRefProps<DataType>, 'appendTo'>, 'dispose'>;
type DefaultDataType = Record<string, unknown>;

declare class HotToastService implements HotToastServiceMethods {
    static nextId: number;
    private _isInitialized;
    private _componentRef;
    private _defaultGlobalConfig;
    private _defaultPersistConfig;
    private _viewService;
    private _platformId;
    private _globalConfig;
    private _container;
    constructor();
    get defaultConfig(): ToastConfig;
    set defaultConfig(config: ToastConfig);
    /**
     * Opens up an hot-toast without any pre-configurations
     *
     * @param message The message to show in the hot-toast.
     * @param [options] Additional configuration options for the hot-toast.
     * @param skipAttachToParent Only for internal usage. Setting this to true will not attach toast to it's parent.
     * @returns
     * @memberof HotToastService
     */
    show<DataType>(message?: Content, options?: ToastOptions<DataType>, skipAttachToParent?: boolean): CreateHotToastRef<DataType | unknown>;
    /**
     * Opens up an hot-toast with pre-configurations for error state
     *
     * @param message The message to show in the hot-toast.
     * @param [options] Additional configuration options for the hot-toast.
     * @returns
     * @memberof HotToastService
     */
    error<DataType>(message?: Content, options?: ToastOptions<DataType>): CreateHotToastRef<DataType | unknown>;
    /**
     * Opens up an hot-toast with pre-configurations for success state
     *
     * @param message The message to show in the hot-toast.
     * @param [options] Additional configuration options for the hot-toast.
     * @returns
     * @memberof HotToastService
     */
    success<DataType>(message?: Content, options?: ToastOptions<DataType>): CreateHotToastRef<DataType | unknown>;
    /**
     * Opens up an hot-toast with pre-configurations for loading state
     *
     * @param message The message to show in the hot-toast.
     * @param [options] Additional configuration options for the hot-toast.
     * @returns
     * @memberof HotToastService
     */
    loading<DataType>(message?: Content, options?: ToastOptions<DataType>): CreateHotToastRef<DataType | unknown>;
    /**
     * Opens up an hot-toast with pre-configurations for warning state
     *
     * @param message The message to show in the hot-toast.
     * @param [options] Additional configuration options for the hot-toast.
     * @returns
     * @memberof HotToastService
     */
    warning<DataType>(message?: Content, options?: ToastOptions<DataType>): CreateHotToastRef<DataType | unknown>;
    /**
     * Opens up an hot-toast with pre-configurations for info state
     *
     * @param message The message to show in the hot-toast.
     * @param [options] Additional configuration options for the hot-toast.
     * @returns
     * @memberof HotToastService
     * @since 3.3.0
     */
    info<DataType>(message?: Content, options?: ToastOptions<DataType>): CreateHotToastRef<DataType | unknown>;
    /**
     *
     *  Opens up an hot-toast with pre-configurations for loading initially and then changes state based on messages
     *
     * @template T Type of observable
     * @param messages Messages for each state i.e. loading, success and error
     * @returns
     * @memberof HotToastService
     */
    observe<T = unknown, DataType = unknown>(messages: ObservableMessages<T, DataType>): (source: Observable<T>) => Observable<T>;
    /**
     * Closes the hot-toast
     *
     * @param [id] - ID of the toast
     * @since 3.0.1 - If ID is not provided, all toasts will be closed
     */
    close(id?: string): void;
    /**
     * Used for internal purpose only.
     * Creates a container component and attaches it to document.body.
     */
    private init;
    private createOrUpdateToast;
    private createToast;
    /**
     * Checks whether any toast with same id is present.
     *
     * @private
     * @param id - Toast ID
     */
    private isDuplicate;
    /**
     * Creates an entry in local or session storage with count ${defaultConfig.persist.count}, if not present.
     * If present in storage, reduces the count
     * and returns the count.
     * Count can not be less than 0.
     */
    private handleStorageValue;
    private getContentAndOptions;
    private createLoadingToast;
    static ɵfac: i0.ɵɵFactoryDeclaration<HotToastService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<HotToastService>;
}

declare function provideHotToastConfig(config?: Partial<ToastConfig>): EnvironmentProviders;

declare class HotToastComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, DoCheck {
    private _toast;
    set toast(value: Toast<unknown>);
    get toast(): Toast<unknown>;
    offset: number;
    defaultConfig: ToastConfig;
    toastRef: CreateHotToastRef<unknown>;
    private _toastsAfter;
    get toastsAfter(): number;
    set toastsAfter(value: number);
    isShowingAllToasts: boolean;
    height: EventEmitter<number>;
    beforeClosed: EventEmitter<any>;
    afterClosed: EventEmitter<HotToastClose>;
    showAllToasts: EventEmitter<boolean>;
    toggleGroup: EventEmitter<HotToastGroupEvent>;
    private toastBarBase;
    isManualClose: boolean;
    context: Record<string, unknown>;
    toastComponentInjector: Injector;
    isExpanded: boolean;
    toastBarBaseStylesSignal: i0.WritableSignal<Record<string, string>>;
    private unlisteners;
    private softClosed;
    private groupRefs;
    private injector;
    private renderer;
    private ngZone;
    private cdr;
    get toastBarBaseHeight(): number;
    get scale(): number;
    get translateY(): string;
    get exitAnimationDelay(): string;
    get top(): boolean;
    get containerPositionStyle(): {
        left: number;
        right?: undefined;
        justifyContent?: undefined;
        top: number;
        bottom?: undefined;
        transform: string;
    } | {
        right: number;
        left?: undefined;
        justifyContent?: undefined;
        top: number;
        bottom?: undefined;
        transform: string;
    } | {
        left: number;
        right: number;
        justifyContent: string;
        top: number;
        bottom?: undefined;
        transform: string;
    } | {
        left: number;
        right?: undefined;
        justifyContent?: undefined;
        bottom: number;
        top?: undefined;
        transform: string;
    } | {
        right: number;
        left?: undefined;
        justifyContent?: undefined;
        bottom: number;
        top?: undefined;
        transform: string;
    } | {
        left: number;
        right: number;
        justifyContent: string;
        bottom: number;
        top?: undefined;
        transform: string;
    };
    get isIconString(): boolean;
    get groupChildrenToastRefs(): CreateHotToastRef<unknown>[];
    set groupChildrenToastRefs(value: CreateHotToastRef<unknown>[]);
    get groupChildrenToasts(): Toast<unknown>[];
    get groupHeight(): number;
    get visibleToasts(): Toast<unknown>[];
    ngDoCheck(): void;
    ngOnChanges(changes: SimpleChanges): void;
    ngOnInit(): void;
    ngAfterViewInit(): void;
    private drag;
    private rubberband;
    private decideVerticalDismiss;
    private attachSwipeListeners;
    softClose(): void;
    softOpen(): void;
    close(): void;
    handleMouseEnter(): void;
    handleMouseLeave(): void;
    ngOnDestroy(): void;
    private isExitAnimation;
    private isEnterAnimation;
    private setToastAttributes;
    calculateOffset(toastId: string): number;
    updateHeight(height: number, toast: Toast<unknown>): void;
    beforeClosedGroupItem(toast: Toast<unknown>): void;
    afterClosedGroupItem(closeToast: HotToastClose): void;
    toggleToastGroup(): void;
    private emiHeightWithGroup;
    static ɵfac: i0.ɵɵFactoryDeclaration<HotToastComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<HotToastComponent, "hot-toast", never, { "toast": { "alias": "toast"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "defaultConfig": { "alias": "defaultConfig"; "required": false; }; "toastRef": { "alias": "toastRef"; "required": false; }; "toastsAfter": { "alias": "toastsAfter"; "required": false; }; "isShowingAllToasts": { "alias": "isShowingAllToasts"; "required": false; }; }, { "height": "height"; "beforeClosed": "beforeClosed"; "afterClosed": "afterClosed"; "showAllToasts": "showAllToasts"; "toggleGroup": "toggleGroup"; }, never, never, true, never>;
}

declare class HotToastContainerComponent {
    defaultConfig: ToastConfig;
    hotToastComponentList: QueryList<HotToastComponent>;
    toasts: Toast<unknown>[];
    toastRefs: CreateHotToastRef<unknown>[];
    isShowingAllToasts: boolean;
    /** Subject for notifying the user that the toast has been closed. */
    private _onClosed;
    /** Subject for notifying the user that the toast has been expanded or collapsed. */
    private _onGroupToggle;
    /** Subject for notifying the user that the group refs have been attached to toast. */
    private _onGroupRefAttached;
    private onClosed$;
    private onGroupToggle$;
    private onGroupRefAttached$;
    private cdr;
    private toastService;
    trackById(index: number, toast: Toast<unknown>): string;
    getVisibleToasts(position: ToastPosition): Toast<unknown>[];
    get unGroupedToasts(): Toast<unknown>[];
    calculateOffset(toastId: string, position: ToastPosition): number;
    updateHeight(height: number, toast: Toast<unknown>): void;
    addToast<DataType>(ref: HotToastRef<DataType>, skipAttachToParent?: boolean): AddToastRef<DataType>;
    private attachGroupRefs;
    private createGroupRefs;
    closeToast(id?: string): void;
    beforeClosed(toast: Toast<unknown>): void;
    afterClosed(closeToast: HotToastClose): void;
    toggleGroup(groupEvent: HotToastGroupEvent): void;
    hasToast(id: string): boolean;
    showAllToasts(show: boolean): void;
    private getAfterClosed;
    private getAfterGroupToggled;
    private getAfterGroupRefsAttached;
    private updateToasts;
    static ɵfac: i0.ɵɵFactoryDeclaration<HotToastContainerComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<HotToastContainerComponent, "hot-toast-container", never, { "defaultConfig": { "alias": "defaultConfig"; "required": false; }; }, {}, never, never, true, never>;
}

declare class HotToastRef<DataType = DefaultDataType> implements HotToastRefProps<DataType> {
    private toast;
    updateMessage: (message: Content) => void;
    updateToast: (options: UpdateToastOptions<DataType>) => void;
    afterClosed: Observable<HotToastClose>;
    afterGroupToggled: Observable<HotToastGroupEvent>;
    afterGroupRefsAttached: Observable<CreateHotToastRef<unknown>[]>;
    groupRefs: CreateHotToastRef<unknown>[];
    groupExpanded: boolean;
    private _dispose;
    /** Subject for notifying the user that the toast has been closed. */
    private _onClosed;
    /** Subject for notifying the user that the toast has been closed. */
    private _onGroupToggle;
    constructor(toast: Toast<DataType>);
    set data(data: DataType);
    get data(): DataType;
    set dispose(value: () => void);
    getToast(): Toast<DataType>;
    /**
     * Used for internal purpose
     * Attach ToastRef to container
     */
    appendTo(container: HotToastContainerComponent, skipAttachToParent?: boolean): this;
    /**
     * Closes the toast
     *
     * @param [closeData={ dismissedByAction: false }] -
     * Make sure to pass { dismissedByAction: true } when closing from template
     * @memberof HotToastRef
     */
    close(closeData?: {
        dismissedByAction: boolean;
    }): void;
    toggleGroup(eventData?: {
        byAction: boolean;
    }): void;
    show(): void;
}

type ToastMethod = 'show' | 'success' | 'error' | 'warning' | 'info' | 'loading';
declare class HotToastBuilder<DataType = unknown> {
    private message;
    private service;
    private options;
    private groupChildren;
    private toastRef;
    constructor(message: Content, service: HotToastService);
    setOptions(options: ToastOptions<DataType>): this;
    addChild(child: HotToastBuilder<unknown>): this;
    get afterGroupRefsAttached(): Observable<CreateHotToastRef<unknown>[]>;
    private addChildrenToOptions;
    create(method?: ToastMethod): CreateHotToastRef<DataType>;
    private createToast;
    show(): CreateHotToastRef<DataType>;
    success(): CreateHotToastRef<DataType>;
    error(): CreateHotToastRef<DataType>;
    warning(): CreateHotToastRef<DataType>;
    info(): CreateHotToastRef<DataType>;
    loading(): CreateHotToastRef<DataType>;
}

/**
 * Injection token to provide a custom container selector for the toast container. The value will be used as a selector to find the container element using `document.querySelector`.
 * @example
 * ```ts
 * import { HOT_TOAST_CONTAINER_TOKEN, provideHotToastConfig } from '@ngxpert/hot-toast';
 * import { bootstrapApplication } from '@angular/platform-browser';
 *
 * bootstrapApplication(AppComponent, {
 *   providers: [
 *     provideHotToastConfig(),
 *     {
 *       provide: HOT_TOAST_CONTAINER_TOKEN,
 *       useValue: '#toast-container',
 *     },
 *   ],
 * }).catch((err) => console.error(err));
 * ```
 *
 */
declare const HOT_TOAST_CONTAINER_TOKEN: InjectionToken<string>;

export { HOT_TOAST_CONTAINER_TOKEN, HotToastBuilder, HotToastRef, HotToastService, ToastConfig, ToastPersistConfig, provideHotToastConfig, resolveValueOrFunction };
export type { AddToastRef, CreateHotToastRef, DefaultDataType, DefaultToastOptions, HotToastClose, HotToastGroupChild, HotToastGroupEvent, HotToastRefProps, HotToastServiceMethods, IconTheme, ObservableLoading, ObservableMessages, ObservableSuccessOrError, Toast, ToastAriaLive, ToastOptions, ToastPosition, ToastRole, ToastStacking, ToastTheme, ToastType, UpdateToastOptions, ValueFunction, ValueOrFunction };