import * as sweetalert2 from 'sweetalert2'; import sweetalert2__default, { SweetAlertOptions, SweetAlertResult, SweetAlertUpdatableParameters, SweetAlertArrayOptions } from 'sweetalert2'; import * as i0 from '@angular/core'; import { OnInit, AfterViewInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges, TemplateRef, ModuleWithProviders, EnvironmentProviders, Provider } from '@angular/core'; import * as i1 from '@angular/common'; /** * Emitted when a SweetAlert modal gets created in memory, just before it's displayed. */ interface WillOpenEvent { readonly modalElement: HTMLElement; } /** * Emitted when a SweetAlert modal gets displayed. */ interface DidOpenEvent { readonly modalElement: HTMLElement; } /** * Emitted when a SweetAlert modal gets rendered. */ interface DidRenderEvent { readonly modalElement: HTMLElement; } /** * Emitted when a SweetAlert modal gets closed (because it's been confirmed, cancelled, or for no reason at all). */ interface WillCloseEvent { readonly modalElement: HTMLElement; } /** * component. See the README.md for usage. * * It contains a bunch of @Inputs that have a perfect 1:1 mapping with SweetAlert2 options. * Their types are directly coming from SweetAlert2 types defintitions, meaning that ngx-sweetalert2 is tightly coupled * to SweetAlert2, but also is type-safe even if both libraries do not evolve in sync. * * (?) If you want to use an object that declares the SweetAlert2 options all at once rather than many @Inputs, * take a look at [swalOptions], that lets you pass a full {@link SweetAlertOptions} object. * * (?) If you are reading the TypeScript source of this component, you may think that it's a lot of code. * Be sure that a lot of this code is types and Angular boilerplate. Compiled and minified code is much smaller. * If you are really concerned about performance and/or don't care about the API and its convenient integration * with Angular (notably change detection and transclusion), you may totally use SweetAlert2 natively as well ;) * * /!\ Some SweetAlert options aren't @Inputs but @Outputs: `willOpen`, `didOpen`, `didRender`, `willClose`, `didClose` * and `didDestroy`. * However, `preConfirm`, `preDeny` and `inputValidator` are still @Inputs because they are not event handlers, * there can't be multiple listeners on them, and we need the values they can/must return. */ declare class SwalComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy { private readonly sweetAlert2Loader; private readonly moduleLevelFireOnInit; private readonly moduleLevelDismissOnDestroy; title: SweetAlertOptions["title"]; titleText: SweetAlertOptions["titleText"]; text: SweetAlertOptions["text"]; html: SweetAlertOptions["html"]; footer: SweetAlertOptions["footer"]; icon: SweetAlertOptions["icon"]; iconColor: SweetAlertOptions["iconColor"]; iconHtml: SweetAlertOptions["iconHtml"]; backdrop: SweetAlertOptions["backdrop"]; toast: SweetAlertOptions["toast"]; target: SweetAlertOptions["target"]; input: SweetAlertOptions["input"]; width: SweetAlertOptions["width"]; padding: SweetAlertOptions["padding"]; background: SweetAlertOptions["background"]; position: SweetAlertOptions["position"]; grow: SweetAlertOptions["grow"]; showClass: SweetAlertOptions["showClass"]; hideClass: SweetAlertOptions["hideClass"]; customClass: SweetAlertOptions["customClass"]; timer: SweetAlertOptions["timer"]; timerProgressBar: SweetAlertOptions["timerProgressBar"]; heightAuto: SweetAlertOptions["heightAuto"]; allowOutsideClick: SweetAlertOptions["allowOutsideClick"]; allowEscapeKey: SweetAlertOptions["allowEscapeKey"]; allowEnterKey: SweetAlertOptions["allowEnterKey"]; stopKeydownPropagation: SweetAlertOptions["stopKeydownPropagation"]; keydownListenerCapture: SweetAlertOptions["keydownListenerCapture"]; showConfirmButton: SweetAlertOptions["showConfirmButton"]; showDenyButton: SweetAlertOptions["showDenyButton"]; showCancelButton: SweetAlertOptions["showCancelButton"]; confirmButtonText: SweetAlertOptions["confirmButtonText"]; denyButtonText: SweetAlertOptions["denyButtonText"]; cancelButtonText: SweetAlertOptions["cancelButtonText"]; confirmButtonColor: SweetAlertOptions["confirmButtonColor"]; denyButtonColor: SweetAlertOptions["denyButtonColor"]; cancelButtonColor: SweetAlertOptions["cancelButtonColor"]; confirmButtonAriaLabel: SweetAlertOptions["confirmButtonAriaLabel"]; denyButtonAriaLabel: SweetAlertOptions["denyButtonAriaLabel"]; cancelButtonAriaLabel: SweetAlertOptions["cancelButtonAriaLabel"]; buttonsStyling: SweetAlertOptions["buttonsStyling"]; reverseButtons: SweetAlertOptions["reverseButtons"]; focusConfirm: SweetAlertOptions["focusConfirm"]; focusDeny: SweetAlertOptions["focusDeny"]; focusCancel: SweetAlertOptions["focusCancel"]; showCloseButton: SweetAlertOptions["showCloseButton"]; closeButtonHtml: SweetAlertOptions["closeButtonHtml"]; closeButtonAriaLabel: SweetAlertOptions["closeButtonAriaLabel"]; loaderHtml: SweetAlertOptions["loaderHtml"]; showLoaderOnConfirm: SweetAlertOptions["showLoaderOnConfirm"]; preConfirm: SweetAlertOptions["preConfirm"]; preDeny: SweetAlertOptions["preDeny"]; imageUrl: SweetAlertOptions["imageUrl"]; imageWidth: SweetAlertOptions["imageWidth"]; imageHeight: SweetAlertOptions["imageHeight"]; imageAlt: SweetAlertOptions["imageAlt"]; inputLabel: SweetAlertOptions["inputLabel"]; inputPlaceholder: SweetAlertOptions["inputPlaceholder"]; inputValue: SweetAlertOptions["inputValue"]; inputOptions: SweetAlertOptions["inputOptions"]; inputAutoTrim: SweetAlertOptions["inputAutoTrim"]; inputAttributes: SweetAlertOptions["inputAttributes"]; inputValidator: SweetAlertOptions["inputValidator"]; returnInputValueOnDeny: SweetAlertOptions["returnInputValueOnDeny"]; validationMessage: SweetAlertOptions["validationMessage"]; progressSteps: SweetAlertOptions["progressSteps"]; currentProgressStep: SweetAlertOptions["currentProgressStep"]; progressStepsDistance: SweetAlertOptions["progressStepsDistance"]; scrollbarPadding: SweetAlertOptions["scrollbarPadding"]; /** * An object of SweetAlert2 native options, useful if: * - you don't want to use the @Inputs for practical/philosophical reasons ; * - there are missing @Inputs because ngx-sweetalert2 isn't up-to-date with SweetAlert2's latest changes. * * /!\ Please note that setting this property does NOT erase what has been set before unless you specify the * previous properties you want to erase again. * Ie. setting { title: 'Title' } and then { text: 'Text' } will give { title: 'Title', text: 'Text' }. * * /!\ Be aware that the options defined in this object will override the @Inputs of the same name. */ set swalOptions(options: SweetAlertOptions); /** * Computes the options object that will get passed to SweetAlert2. * Only the properties that have been set at least once on this component will be returned. * Mostly for internal usage. */ get swalOptions(): SweetAlertOptions; /** * Whether to fire the modal as soon as the component is created and initialized in the view. * When left undefined (default), the value will be inherited from the module configuration, which is `false`. * * Example: * */ swalFireOnInit?: boolean; /** * Whether to dismiss the modal when the component is destroyed by Angular (for any reason) or not. * When left undefined (default), the value will be inherited from the module configuration, which is `true`. */ swalDismissOnDestroy?: boolean; set swalVisible(visible: boolean); get swalVisible(): boolean; /** * Modal lifecycle hook. Synchronously runs before the modal is shown on screen. */ readonly willOpen: EventEmitter; /** * Modal lifecycle hook. Synchronously runs before the modal is shown on screen. */ readonly didOpen: EventEmitter; /** * Modal lifecycle hook. Synchronously runs after the popup DOM has been updated (ie. just before the modal is * repainted on the screen). * Typically, this will happen after `Swal.fire()` or `Swal.update()`. * If you want to perform changes in the popup's DOM, that survive `Swal.update()`, prefer {@link didRender} over * {@link willOpen}. */ readonly didRender: EventEmitter; /** * Modal lifecycle hook. Synchronously runs when the popup closes by user interaction (and not due to another popup * being fired). */ readonly willClose: EventEmitter; /** * Modal lifecycle hook. Asynchronously runs after the popup has been disposed by user interaction (and not due to * another popup being fired). */ readonly didClose: EventEmitter; /** * Modal lifecycle hook. Synchronously runs after popup has been destroyed either by user interaction or by another * popup. * If you have cleanup operations that you need to reliably execute each time a modal is closed, prefer * {@link didDestroy} over {@link didClose}. */ readonly didDestroy: EventEmitter; /** * Emits when the user clicks "Confirm". * The event value ($event) can be either: * - by default, just `true`, * - when using {@link input}, the input value, * - when using {@link preConfirm}, the return value of this function. * * Example: * * * public handleConfirm(email: string): void { * // ... save user email * } */ readonly confirm: EventEmitter; /** * Emits when the user clicks "Deny". * This event bears no value. * Use `(deny)` (along with {@link showDenyButton}) when you want a modal with three buttons (confirm, deny and * cancel), and/or when you want to handle clear refusal in a separate way than simple dismissal. * * Example: * * * public handleDeny(): void { * } */ readonly deny: EventEmitter; /** * Emits when the user clicks "Cancel", or dismisses the modal by any other allowed way. * The event value ($event) is a string that explains how the modal was dismissed. It is `undefined` when * the modal was programmatically closed (through {@link close} for example). * * Example: * * * public handleDismiss(reason: SweetAlertResult["dismiss"] | undefined): void { * // reason can be 'cancel', 'overlay', 'close', 'timer' or undefined. * // ... do something * } */ readonly dismiss: EventEmitter; /** * This Set retains the properties that have been changed from @Inputs, so we can know precisely * what options we have to send to {@link Swal.fire}. */ private readonly touchedProps; /** * A function of signature `(propName: string): void` that adds a given property name to the list of * touched properties, ie. {@link touchedProps}. */ private readonly markTouched; /** * Is the SweetAlert2 modal represented by this component currently opened? */ private isCurrentlyShown; /** * Angular lifecycle hook. * Asks the SweetAlert2 loader service to preload the SweetAlert2 library, so it begins to be loaded only if there * is a component somewhere, and is probably fully loaded when the modal has to be displayed, * causing no delay. */ ngOnInit(): void; /** * Angular lifecycle hook. * Fires the modal, if the component or module is configured to do so. */ ngAfterViewInit(): void; /** * Angular lifecycle hook. * Updates the SweetAlert options, and if the modal is opened, asks SweetAlert to render it again. */ ngOnChanges(changes: SimpleChanges): void; /** * Angular lifecycle hook. * Closes the SweetAlert when the component is destroyed. */ ngOnDestroy(): void; /** * Shows the SweetAlert. * * Returns the SweetAlert2 promise for convenience and use in code behind templates. * Otherwise, (confirm)="myHandler($event)" and (dismiss)="myHandler($event)" can be used in templates. */ fire(): Promise; /** * Closes the modal, if opened. * * @param result The value that the modal will resolve with, triggering either (confirm), (deny) or (dismiss). * If the argument is not passed, it is (dismiss) that will emit an `undefined` reason. * {@see Swal.close}. */ close(result?: SweetAlertResult): Promise; /** * Updates SweetAlert2 options while the modal is opened, causing the modal to re-render. * If the modal is not opened, the component options will simply be updated and that's it. * * /!\ Please note that not all SweetAlert2 options are updatable while the modal is opened. * * @param options */ update(options?: Pick): Promise; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * [swal] directive. It takes a value that defines the SweetAlert and can be of three types: * * 1) A simple array of two or three strings defining [title, text, icon] - the icon being optional, ex: * * * * 2) A native SweetAlert2 options object, ex: * * * * 3) A reference to an existing SwalComponent instance for more advanced uses, ex: * * * */ declare class SwalDirective implements OnInit, OnDestroy { private readonly viewContainerRef; private readonly resolver; /** * SweetAlert2 options or a SwalComponent instance. * See the class doc block for more informations. */ set swal(options: SwalComponent | SweetAlertOptions | SweetAlertArrayOptions); /** * Emits when the user clicks "Confirm". * The event value ($event) can be either: * - by default, just `true`, * - when using {@link input}, the input value, * - when using {@link preConfirm}, the return value of this function. * * Example: * * * public handleConfirm(email: string): void { * // ... save user email * } */ readonly confirm: EventEmitter; /** * Emits when the user clicks "Deny". * This event bears no value. * Use `(deny)` (along with {@link showDenyButton}) when you want a modal with three buttons (confirm, deny and * cancel), and/or when you want to handle clear refusal in a separate way than simple dismissal. * * Example: * * * public handleDeny(): void { * } */ readonly deny: EventEmitter; /** * Emits when the user clicks "Cancel", or dismisses the modal by any other allowed way. * The event value ($event) is a string that explains how the modal was dismissed. It is `undefined` when * the modal was programmatically closed (through {@link dismiss} for example). * * Example: * * * public handleDismiss(reason: DismissReason | undefined): void { * // reason can be 'cancel', 'overlay', 'close', 'timer' or undefined. * // ... do something * } */ readonly dismiss: EventEmitter; /** * When the user does not provides a SwalComponent instance, we create it on-the-fly and assign the plain-object * options to it. * This fields keeps a reference to the dynamically-created , to destroy it along this directive instance. */ private swalRef?; /** * An instance of the component that this directive controls. * Could be an instance passed by the user, otherwise it's the instance we've dynamically created. */ private swalInstance?; /** * Holds the native SweetAlert2 options. * Empty when the user passed an existing SwalComponent instance. */ private swalOptions?; /** * OnInit lifecycle handler. * Creates a SwalComponent instance if the user didn't provided one and binds on that component (confirm), * (deny) and (dismiss) outputs to reemit on the directive. */ ngOnInit(): void; /** * OnDestroy lifecycle handler. * Destroys the dynamically-created SwalComponent. */ ngOnDestroy(): void; /** * Click handler. * The directive listens for onclick events on its host element. * When this happens, it shows the attached to this directive. */ onClick(event: MouseEvent): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface SwalPortalTarget { options?: SweetAlertOptions; element(swal: typeof sweetalert2__default): HTMLElement | null; } /** * Represents an object of targets for portals (use with *swalPortal directive). * We must use thunks to access the Swal.* functions listed below, because they get created after the first modal is * shown, so this object lets us reference those functions safely and in a statically-typed manner. */ declare class SwalPortalTargets { /** * Targets the modal close button block contents. */ readonly closeButton: SwalPortalTarget; /** * Targets the modal title block contents. */ readonly title: SwalPortalTarget; /** * Targets the modal text block contents (that is another block inside the first content block, so you can still * use other modal features like Swal inputs, that are situated inside that parent content block). */ readonly content: SwalPortalTarget; /** * Targets the actions block contents, where are the confirm and cancel buttons in a normal time. * /!\ WARNING: using this target destroys some of the native SweetAlert2 modal's DOM, therefore, if you use this * target, do not update the modal via @Inputs while the modal is open, or you'll get an error. * We could workaround that inconvenient inside this integration, but that'd be detrimental to memory and * performance of everyone, for a relatively rare use case. */ readonly actions: SwalPortalTarget; /** * Targets the confirm button contents, replacing the text inside it (not the button itself) */ readonly confirmButton: SwalPortalTarget; /** * Targets the deny button contents, replacing the text inside it (not the button itself) */ readonly denyButton: SwalPortalTarget; /** * Targets the cancel button contents, replacing the text inside it (not the button itself) */ readonly cancelButton: SwalPortalTarget; /** * Targets the modal footer contents. */ readonly footer: SwalPortalTarget; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * A structural directive that lets you use Angular templates inside of SweetAlerts. * There are different targetable zones provided by {@link SwalPortalTargets}: title, content, confirmButton, etc, but * you can also make your own target by implementing {@link SwalPortalTarget} and giving it to this directive. * The default target is the alert text content zone. * * Usage in your component's TypeScript (if you use another target than {@link SwalPortalTargets.content}): * * @Component({ ... }) * export class MyComponent { * public constructor(public readonly swalTargets: SwalPortalTargets) { * } * } * * Usage in the template: * * * *
* ... *
* * * * Send ({{ secondsLeft }} seconds left) * * */ declare class SwalPortalDirective implements OnInit, OnDestroy { private readonly resolver; private readonly injector; private readonly app; private readonly templateRef; private readonly sweetAlert2Loader; private readonly swalTargets; private readonly swalComponent; /** * Takes a portal target or nothing (then it will target the text content zone by default). * * See the {@link SwalPortalTargets} service to see the available targets. * See the class doc block for more informations. */ target?: SwalPortalTarget; /** * Holds the component reference of the controlled SwalPortalComponent to destroy it when no longer needed. */ private portalComponentRef?; private readonly destroyed; /** * Subscribes to the the SweetAlert appearance/disappearance events to create/destroy the SwalPortalComponent * that will receive the consumer's template. */ ngOnInit(): void; /** * Signal any {@link destroyed} consumer that this is over, so they can unsubscribe from the * parent SwalComponent events. */ ngOnDestroy(): void; /** * This didRender hook runs 1..n times (per modal instance), just before the modal is shown (and also before the * {@link willOpenHook}), or after Swal.update() is called. * This is a good place to render, or re-render, our portal contents. */ private didRenderHook; /** * This willOpen hook runs once (per modal instance), just before the modal is shown on the screen. * This is a good place to declare our detached view to the Angular app. */ private willOpenHook; /** * This didDestroy hook runs once (per modal instance), just after the modal closing animation terminated. * This is a good place to detach and destroy our content, that is not visible anymore. */ private didDestroyHook; /** * Creates the {@link SwalPortalComponent} and gives it the customer's template ref. */ private createPortalComponent; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * @internal * Holds a consumer's Angular template and displays it on a Sweet Alert. * See SwalPortalDirective for info about the covered feature. */ declare class SwalPortalComponent { template: TemplateRef | null; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type SwalModule = typeof sweetalert2__default | typeof sweetalert2; type SwalProvider = SwalModuleLoader | SwalModule; type SwalModuleLoader = () => Promise; declare class SweetAlert2LoaderService { private readonly swalProvider; private swalPromiseCache?; get swal(): Promise; preloadSweetAlertLibrary(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } interface Sweetalert2ModuleConfig { provideSwal?: SwalProvider; fireOnInit?: boolean; dismissOnDestroy?: boolean; } /** * @deprecated Use provideSweetAlert2() instead for new applications with standalone components. * This module is kept for backward compatibility with existing applications using NgModules. */ declare class SweetAlert2Module { static forRoot(options?: Sweetalert2ModuleConfig): ModuleWithProviders; static forChild(options?: Sweetalert2ModuleConfig): ModuleWithProviders; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } interface SweetAlert2Config { provideSwal?: SwalProvider; fireOnInit?: boolean; dismissOnDestroy?: boolean; } /** * Provides SweetAlert2 services for Angular applications using the modern provider pattern. * Use this instead of SweetAlert2Module.forRoot() for standalone applications. * * @param config Configuration options for SweetAlert2 * @returns EnvironmentProviders that can be used in ApplicationConfig or bootstrapApplication * * @example * ```typescript * // In your main.ts or app.config.ts * import { provideSweetAlert2 } from '@sweetalert2/ngx-sweetalert2'; * * export const appConfig: ApplicationConfig = { * providers: [ * // other providers * provideSweetAlert2(), * // or with configuration * provideSweetAlert2({ * fireOnInit: false, * dismissOnDestroy: true * }) * ] * }; * ``` */ declare function provideSweetAlert2(config?: SweetAlert2Config): EnvironmentProviders; /** * Provides SweetAlert2 services for feature modules. * Use this in lazy-loaded modules that need different SweetAlert2 configuration. * * @param config Configuration options for SweetAlert2 * @returns Array of providers that can be used in a feature module * * @example * ```typescript * // In a feature module or component providers * import { provideSweetAlert2ForFeature } from '@sweetalert2/ngx-sweetalert2'; * * @Component({ * providers: [ * ...provideSweetAlert2ForFeature({ * dismissOnDestroy: false * }) * ] * }) * export class MyFeatureComponent {} * ``` */ declare function provideSweetAlert2ForFeature(config?: SweetAlert2Config): Provider[]; export { SwalComponent, SwalDirective, SwalPortalComponent, SwalPortalDirective, SwalPortalTargets, SweetAlert2LoaderService, SweetAlert2Module, provideSweetAlert2, provideSweetAlert2ForFeature }; export type { DidOpenEvent, DidRenderEvent, SwalModuleLoader, SwalPortalTarget, SweetAlert2Config, WillCloseEvent, WillOpenEvent };