import { BreakpointObserver } from '@angular/cdk/layout'; import { Overlay } from '@angular/cdk/overlay'; import * as i0 from '@angular/core'; import { EventEmitter, OnDestroy, Injector, Provider } from '@angular/core'; import { DaffPalette, DaffStatus, DaffFocusStackService } from '@daffodil/design'; import { Observable } from 'rxjs'; /** * The available vertical positions for toasts. */ type DaffToastVerticalPosition = 'top' | 'bottom'; /** * The available horizontal positions for toasts. */ type DaffToastHorizontalPosition = 'left' | 'center' | 'right'; interface DaffToastVerticalPositionInterface { vertical: DaffToastVerticalPosition; } interface DaffToastHorizontalPositionInterface { horizontal: DaffToastHorizontalPosition; } type DaffToastPosition = DaffToastVerticalPositionInterface & DaffToastHorizontalPositionInterface; interface DaffToastOptions { /** * The position of all toasts. */ position: DaffToastPosition; /** * @docs-private */ useParent?: boolean; } declare class DaffToastPositionService { private options; private mediaQuery; constructor(options: DaffToastOptions, mediaQuery: BreakpointObserver); private _config; private _position; /** * Reads the current position of the toast. Defaults to bottom center on mobile devices. */ get config(): DaffToastPosition; private set config(value); /** * Changes the position of the toast. * * @param position The position of the toast. */ setPosition(position: DaffToastPosition): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * The available button styles that can be used in {@link DaffToastAction}. * These correspond to the types supported by {@link DaffButtonComponent}. */ type DaffToastActionButtonType = 'raised' | 'underline' | 'stroked' | 'flat' | undefined; /** * The available button sizes that can be used in {@link DaffToastAction}. * These correspond to the types supported by {@link DaffButtonComponent}. */ type DaffToastActionButtonSize = 'sm' | 'md' | 'lg' | undefined; /** * Configuration for an action button inside a toast. Actions are rendered using {@link DaffButtonComponent}. */ interface DaffToastAction { /** * The type of button. * * Matches one of the predefined types supported by {@link DaffButtonComponent}. */ type?: DaffToastActionButtonType; /** * The text displayed on the button. */ content: string; /** * The button size. * * Matches one of the predefined sizes supported by {@link DaffButtonComponent}. */ size?: DaffToastActionButtonSize; /** * The button color. * * Do not use both `color` and `status` simultaneously. */ color?: DaffPalette; /** * The button status. * * Do not use both `color` and `status` simultaneously. */ status?: DaffStatus; /** * Data associated with the action. */ data?: Record; /** * Emits when the action is triggered. */ eventEmitter?: EventEmitter; } /** * Data that defines the content and behavior of a toast. */ interface DaffToastData { /** * The primary text that summarizes the purpose of the toast. */ title: string; /** * Provides additional details or context about the toast. */ message?: string; /** * The visual status of the toast. */ status?: DaffStatus; /** * Used to display actionable buttons related to the toast. */ actions?: DaffToastAction[]; /** * Whether the toast can be manually dismissed with a close button. */ dismissible?: boolean; } /** * A toast instance. */ interface DaffToast extends DaffToastData { /** * Closes the toast. */ dismiss: () => void; /** * Emits when the toast has been closed. */ dismissalStream: Observable; } /** * Defines optional settings that control the behavior of a toast. */ interface DaffToastConfiguration { /** * The duration (in milliseconds) the toast remains visible before dismissal. By default, toasts without actions are dismissed after `5000ms`. * * While a duration can be set for actionable toasts, it is not recommended since * users should have sufficient time to interact with the actions. * * * @usage * ``` * export class CustomComponent { * private toast: DaffToast; * * constructor(private toastService: DaffToastService) {} * * open() { * this.toast = this.toastService.open({ * title: 'Update Complete', * message: 'This page has been updated to the newest version.', * status: 'success', * }, * { * duration: 7000, * }); * } * } * ``` */ duration?: number; } /** * Service to display toasts. * * @example * ```ts * import { * ChangeDetectionStrategy, * Component, * EventEmitter, * OnInit, * } from '@angular/core'; * * import { * DaffToast, * DaffToastAction, * DaffToastService, * } from '@daffodil/design/toast'; * * @Component({ * selector: 'default-toast', * templateUrl: './default-toast.component.html', * styles: [], * changeDetection: ChangeDetectionStrategy.OnPush, * }) * export class DefaultToastComponent implements OnInit { * private toast: DaffToast; * * constructor(private toastService: DaffToastService) {} * * closeToast = new EventEmitter(); * * open() { * this.toast = this.toastService.open({ * title: 'Update Available', * message: 'A new version of this page is available.', * actions: [ * { content: 'Remind me later', type: 'flat', size: 'sm', eventEmitter: this.closeToast }, * ], * }); * } * * ngOnInit() { * this.closeToast.subscribe(() => { * this.toastService.close(this.toast); * }); * } * } * ``` */ declare class DaffToastService implements OnDestroy { private overlay; private options; private _parentToast; private mediaQuery; private toastPosition; private focusStack; private injector; private _sub; private _toasts; private _overlayRef?; private _template?; constructor(overlay: Overlay, options: DaffToastOptions, _parentToast: DaffToastService, mediaQuery: BreakpointObserver, toastPosition: DaffToastPositionService, focusStack: DaffFocusStackService, injector: Injector); /** * @docs-private */ ngOnDestroy(): void; private _attachToastTemplate; private _createOverlayRef; /** * Opens a toast. * * @param toast Data that can be shown on a toast. * @param configuration Additional configuration options such as duration. The default duration is set to `5000ms`. */ open(toast: DaffToastData, configuration?: Partial): DaffToast; /** * Closes a toast. * * @param toast The instance of toast that you wish to close. */ close(toast: DaffToast): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Registers the `DaffToastService` for displaying a toast. This provider ensures * toasts function correctly within your application. * * ```ts * import { provideDaffToast } from '@daffodil/design/toast'; * * @NgModule({ * providers: [ * provideDaffToast({ * position: { * vertical: 'bottom', * horizontal: 'left', * }, * }), * ] * )} * * export class AppModule {} * ``` * @param config Sets the configuration for all toasts. * Toasts are displayed in the top-right corner of the screen by default on desktop devices. * * On mobile devices, toasts will always appear in the bottom-center position, * regardless of configuration settings. * */ declare const provideDaffToast: (config?: DaffToastOptions) => Provider[]; export { DaffToastService, provideDaffToast }; export type { DaffToast, DaffToastAction, DaffToastActionButtonSize, DaffToastActionButtonType, DaffToastConfiguration, DaffToastData, DaffToastHorizontalPosition, DaffToastOptions, DaffToastPosition, DaffToastVerticalPosition };