ngx-french-toast/fesm2022/ngx-french-toast.mjs

<p align="center"> <img src="./projects/ngx-french-toast/logo.png" alt="ngx-french-toast logo" width="200px" /> </p>

import * as i0 from '@angular/core';
import { InjectionToken, inject, signal, Injectable, viewChild, ViewContainerRef, input, effect, untracked, HostListener, Component, NgModule, makeEnvironmentProviders } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { NgStyle } from '@angular/common';

var ToastPosition;
(function (ToastPosition) {
    ToastPosition["TOP_RIGHT"] = "top-right";
    ToastPosition["BOTTOM_RIGHT"] = "bottom-right";
    ToastPosition["TOP_LEFT"] = "top-left";
    ToastPosition["BOTTOM_LEFT"] = "bottom-left";
})(ToastPosition || (ToastPosition = {}));
var ToastType;
(function (ToastType) {
    ToastType["SUCCESS"] = "success";
    ToastType["DANGER"] = "danger";
    ToastType["WARNING"] = "warning";
    ToastType["INFO"] = "info";
})(ToastType || (ToastType = {}));

const TOAST_CONFIG = new InjectionToken('TOAST_CONFIG');
const TOASTS_CONTAINER = new InjectionToken('TOASTS_CONTAINER');

class ToastService {
    config = inject(TOAST_CONFIG);
    overlay = inject(Overlay);
    toastsContainer = inject(TOASTS_CONTAINER, { optional: true });
    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []));
    defaultDuration;
    overlayRef = null;
    /** Read-only view of active toasts — consumed by ToastsComponent. */
    toasts = this._toasts.asReadonly();
    constructor() {
        this.defaultDuration = this.config?.defaultDuration ?? 7000;
    }
    success(toastInput) {
        this.add(toastInput, ToastType.SUCCESS);
    }
    danger(toastInput) {
        this.add(toastInput, ToastType.DANGER);
    }
    info(toastInput) {
        this.add(toastInput, ToastType.INFO);
    }
    warning(toastInput) {
        this.add(toastInput, ToastType.WARNING);
    }
    clearAllToasts() {
        this._toasts.update((toasts) => toasts.map((t) => ({ ...t, _markedForRemoval: true })));
    }
    destroyToast(toastComponent) {
        const uid = toastComponent.toast()._uId;
        this._toasts.update((toasts) => toasts.map((t) => (t._uId === uid ? { ...t, _markedForRemoval: true } : t)));
    }
    /**
     * @internal — called by ToastComponent after its exit animation completes.
     */
    remove(uid) {
        this._toasts.update((toasts) => toasts.filter((t) => t._uId !== uid));
        if (this._toasts().length === 0) {
            this.overlayRef?.dispose();
            this.overlayRef = null;
        }
    }
    add(toastInput, type) {
        const toast = {
            ...toastInput,
            _id: toastInput._id ?? this.generateId(),
            _uId: this.generateId(),
            type,
            isVisible: true,
            duration: toastInput.duration ?? this.defaultDuration,
        };
        const limit = this.config?.limit ?? 3;
        this._toasts.update((toasts) => {
            const updated = [...toasts, toast];
            if (updated.length > limit) {
                const allPinned = updated.every((t) => t.pinned);
                const idx = allPinned ? 0 : updated.findIndex((t) => !t.pinned);
                if (idx !== -1) {
                    updated[idx] = { ...updated[idx], _markedForRemoval: true };
                }
            }
            return updated;
        });
        if (!this.overlayRef?.hasAttached()) {
            this.createOverlay();
        }
    }
    createOverlay() {
        if (!this.toastsContainer)
            return;
        this.overlayRef = this.overlay.create();
        this.overlayRef.attach(new ComponentPortal(this.toastsContainer));
    }
    generateId() {
        return typeof crypto !== 'undefined' && crypto.randomUUID
            ? crypto.randomUUID()
            : Math.random().toString(36).slice(2) + Date.now().toString(36);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [] });

function darkenHexColor(hexColor, factor) {
    hexColor = hexColor.replace('#', '');
    const r = parseInt(hexColor.substring(0, 2), 16);
    const g = parseInt(hexColor.substring(2, 4), 16);
    const b = parseInt(hexColor.substring(4, 6), 16);
    const hsl = rgbToHsl(r, g, b);
    const darkenedHsl = { ...hsl, l: hsl.l * factor };
    // 0.125 black overlay keeps the gradient visually grounded
    const darkenedL = darkenedHsl.l * (1 - 0.125);
    const rgb = hslToRgb(darkenedHsl.h, darkenedHsl.s, darkenedL);
    return `#${padZero(rgb.r.toString(16))}${padZero(rgb.g.toString(16))}${padZero(rgb.b.toString(16))}`;
}
function rgbToHsl(r, g, b) {
    r /= 255;
    g /= 255;
    b /= 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h = 0, s = 0, l = (max + min) / 2;
    if (max !== min) {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch (max) {
            case r:
                h = (g - b) / d + (g < b ? 6 : 0);
                break;
            case g:
                h = (b - r) / d + 2;
                break;
            case b:
                h = (r - g) / d + 4;
                break;
        }
        h /= 6;
    }
    return { h, s, l };
}
function hslToRgb(h, s, l) {
    let r, g, b;
    if (s === 0) {
        r = g = b = l;
    }
    else {
        const hue2rgb = (p, q, t) => {
            if (t < 0)
                t += 1;
            if (t > 1)
                t -= 1;
            if (t < 1 / 6)
                return p + (q - p) * 6 * t;
            if (t < 1 / 2)
                return q;
            if (t < 2 / 3)
                return p + (q - p) * (2 / 3 - t) * 6;
            return p;
        };
        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        const p = 2 * l - q;
        r = hue2rgb(p, q, h + 1 / 3) * 255;
        g = hue2rgb(p, q, h) * 255;
        b = hue2rgb(p, q, h - 1 / 3) * 255;
    }
    return {
        r: Math.round(r),
        g: Math.round(g),
        b: Math.round(b),
    };
}
function padZero(hex) {
    return hex.length === 1 ? `0${hex}` : hex;
}

class ToastComponent {
    config = inject(TOAST_CONFIG);
    toastService = inject(ToastService);
    onClick(event) {
        event.stopPropagation();
    }
    container = viewChild.required('container', { read: ViewContainerRef });
    toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
    isVisible = signal(false, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
    duration;
    remainingTime;
    timeout;
    resumeTime;
    componentRef;
    svgUrlIsFromSprite = false;
    position;
    bottomRight = ToastPosition.BOTTOM_RIGHT;
    bottomLeft = ToastPosition.BOTTOM_LEFT;
    topRight = ToastPosition.TOP_RIGHT;
    topLeft = ToastPosition.TOP_LEFT;
    timebarColor;
    textColor = '';
    style = '';
    constructor() {
        this.position = this.config.position ?? ToastPosition.BOTTOM_RIGHT;
        effect(() => {
            if (this.toast()._markedForRemoval) {
                untracked(() => this.dismiss());
            }
        });
    }
    ngOnInit() {
        this.getColors();
        const toast = this.toast();
        this.svgUrlIsFromSprite = !!toast.icon?.includes('.svg#');
        if (toast.infinite)
            return;
        this.duration = Number(toast.duration);
        this.remainingTime = this.duration;
        this.resumeTime = new Date();
        this.timeout = setTimeout(() => this.dismiss(), this.duration);
    }
    ngAfterViewInit() {
        if (this.toast().component) {
            this.createDynamicToast();
        }
        requestAnimationFrame(() => {
            this.isVisible.set(true);
        });
    }
    ngOnDestroy() {
        clearTimeout(this.timeout);
    }
    dismiss() {
        if (!this.isVisible())
            return;
        clearTimeout(this.timeout);
        this.isVisible.set(false);
        setTimeout(() => {
            this.toastService.remove(this.toast()._uId);
        }, 100);
    }
    onMouseEnter() {
        if (this.toast().infinite)
            return;
        clearTimeout(this.timeout);
        this.remainingTime -= new Date().getTime() - this.resumeTime.getTime();
    }
    onMouseLeave() {
        if (this.toast().infinite)
            return;
        this.resumeTime = new Date();
        this.timeout = setTimeout(() => this.dismiss(), this.remainingTime);
    }
    createDynamicToast() {
        this.container().clear();
        this.componentRef = this.container().createComponent(this.toast().component);
        this.componentRef.instance.content = this.toast().content;
        if (this.toast().context) {
            this.componentRef.instance.context = this.toast().context;
        }
    }
    getColors() {
        this.getToastStyle();
        this.getTimebarColor();
    }
    getToastStyle() {
        this.textColor = this.getToastTextColor();
        this.style = `--text-color: ${this.textColor};`;
        const colorHexCode = this.config?.colors?.[this.toast().type];
        if (!colorHexCode)
            return;
        const darkened = darkenHexColor(colorHexCode, 0.725);
        const linearGradient = this.config.colors?.autoGradient
            ? `linear-gradient(45deg, ${darkened}, ${colorHexCode})`
            : colorHexCode;
        this.style += `background: ${linearGradient}`;
    }
    getToastTextColor() {
        const key = (this.toast().type + 'Text');
        return this.config.colors?.[key] ?? '#ffffff';
    }
    getTimebarColor() {
        if (!this.config.colors?.timebar)
            return;
        this.timebarColor = { background: this.config.colors.timebar };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ToastComponent, isStandalone: true, selector: "toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"toast-container\"\r\n  [id]=\"toast()._id\"\r\n  [style]=\"style\"\r\n  [class.right]=\"position === bottomRight || position === topRight\"\r\n  [class.left]=\"position === bottomLeft || position === topLeft\"\r\n  [class.visible]=\"isVisible()\"\r\n  [class]=\"toast().type\"\r\n  [class.dynamic]=\"toast().component\"\r\n  (click)=\"toast().component ? null : dismiss()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\"\r\n>\r\n  @if (toast().component) {\r\n    <div class=\"close\">\r\n      <button class=\"icon\" (click)=\"dismiss()\"></button>\r\n    </div>\r\n  }\r\n  @if (!toast().infinite) {\r\n    <div class=\"toast-timer\" [style]=\"'--animation-speed: ' + duration / 1000 + 's;'\" [ngStyle]=\"timebarColor\"></div>\r\n  }\r\n  <div class=\"toast-group\">\r\n    @if (toast().icon) {\r\n      <div class=\"toast-group__icon\">\r\n        @if (svgUrlIsFromSprite) {\r\n          <svg>\r\n            <use [attr.xlink:href]=\"toast().icon\"></use>\r\n          </svg>\r\n        } @else {\r\n          <img [src]=\"toast().icon\" />\r\n        }\r\n      </div>\r\n    }\r\n    <div class=\"toast-group__text\">\r\n      <span class=\"toast-group__text--title\">{{ toast().title }}</span>\r\n      @if (toast().component || toast().content) {\r\n        @if (toast().component) {\r\n          <ng-template #container />\r\n        } @else {\r\n          <span class=\"toast-group__text--content\">{{ toast().content }}</span>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".toast-container{opacity:0;width:22.5rem;transition:all .3s;border-radius:8px;overflow:hidden;padding:.625rem 1rem;position:relative}@media screen and (max-width:768px){.toast-container{width:100%}}.toast-container .close{position:absolute;top:.5rem;right:.5rem;display:flex;justify-content:center;align-items:center}.toast-container .close .icon{width:25px;height:25px;position:relative;display:flex;justify-content:center;align-items:center;border:0;outline:0;background:transparent;transition:all .3s;cursor:pointer}.toast-container .close .icon:hover{opacity:.5}.toast-container .close .icon:before,.toast-container .close .icon:after{content:\"\";position:absolute;width:15px;height:2px;background-color:var(--text-color);transform-origin:center}.toast-container .close .icon:before{transform:rotate(45deg)}.toast-container .close .icon:after{transform:rotate(-45deg)}.toast-container .toast-group{display:flex;gap:1rem}.toast-container .toast-group .toast-group__icon{display:flex;justify-content:flex-start;align-items:flex-start;height:max-content}.toast-container .toast-group .toast-group__text{display:flex;flex-direction:column;gap:2px}.toast-container .toast-group .toast-group__text .toast-group__text--title{font-size:var(--title-font-size);font-weight:600;color:var(--text-color);line-height:1.2rem}.toast-container .toast-group .toast-group__text .toast-group__text--content{font-size:var(--content-font-size);font-weight:500;color:var(--text-color);line-height:130%}.toast-container .toast-timer{height:4px;position:absolute;top:0;left:0;border-radius:8px;animation:widthAnimation var(--animation-speed) linear;background:linear-gradient(45deg,#2b6bbf,#10425b);animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.toast-container:not(.dynamic){cursor:pointer}.toast-container.right{transform:translate(120%)}.toast-container.left{transform:translate(-120%)}.toast-container.visible{transform:translate(0);opacity:1}.toast-container.visible:hover{opacity:.9}.toast-container.visible:hover .toast-timer{animation-play-state:paused}@keyframes widthAnimation{0%{width:0%}to{width:100%}}.toast-container.danger{background:linear-gradient(45deg,#d10303,#f77676)}.toast-container.success{background:linear-gradient(45deg,#00bd6e,#58d77c)}.toast-container.info{background:linear-gradient(45deg,#5b9dcb,#9cd1f7)}.toast-container.warning{background:linear-gradient(45deg,#f58802,#ffc600)}.toast-container svg{color:var(--text-color);fill:var(--text-color);width:1rem;height:1rem}.toast-container img{width:1rem}\n", "*,*:after,*:before{font-family:var(--font-family);box-sizing:border-box;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'toast', imports: [NgStyle], template: "<div\r\n  class=\"toast-container\"\r\n  [id]=\"toast()._id\"\r\n  [style]=\"style\"\r\n  [class.right]=\"position === bottomRight || position === topRight\"\r\n  [class.left]=\"position === bottomLeft || position === topLeft\"\r\n  [class.visible]=\"isVisible()\"\r\n  [class]=\"toast().type\"\r\n  [class.dynamic]=\"toast().component\"\r\n  (click)=\"toast().component ? null : dismiss()\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\"\r\n>\r\n  @if (toast().component) {\r\n    <div class=\"close\">\r\n      <button class=\"icon\" (click)=\"dismiss()\"></button>\r\n    </div>\r\n  }\r\n  @if (!toast().infinite) {\r\n    <div class=\"toast-timer\" [style]=\"'--animation-speed: ' + duration / 1000 + 's;'\" [ngStyle]=\"timebarColor\"></div>\r\n  }\r\n  <div class=\"toast-group\">\r\n    @if (toast().icon) {\r\n      <div class=\"toast-group__icon\">\r\n        @if (svgUrlIsFromSprite) {\r\n          <svg>\r\n            <use [attr.xlink:href]=\"toast().icon\"></use>\r\n          </svg>\r\n        } @else {\r\n          <img [src]=\"toast().icon\" />\r\n        }\r\n      </div>\r\n    }\r\n    <div class=\"toast-group__text\">\r\n      <span class=\"toast-group__text--title\">{{ toast().title }}</span>\r\n      @if (toast().component || toast().content) {\r\n        @if (toast().component) {\r\n          <ng-template #container />\r\n        } @else {\r\n          <span class=\"toast-group__text--content\">{{ toast().content }}</span>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".toast-container{opacity:0;width:22.5rem;transition:all .3s;border-radius:8px;overflow:hidden;padding:.625rem 1rem;position:relative}@media screen and (max-width:768px){.toast-container{width:100%}}.toast-container .close{position:absolute;top:.5rem;right:.5rem;display:flex;justify-content:center;align-items:center}.toast-container .close .icon{width:25px;height:25px;position:relative;display:flex;justify-content:center;align-items:center;border:0;outline:0;background:transparent;transition:all .3s;cursor:pointer}.toast-container .close .icon:hover{opacity:.5}.toast-container .close .icon:before,.toast-container .close .icon:after{content:\"\";position:absolute;width:15px;height:2px;background-color:var(--text-color);transform-origin:center}.toast-container .close .icon:before{transform:rotate(45deg)}.toast-container .close .icon:after{transform:rotate(-45deg)}.toast-container .toast-group{display:flex;gap:1rem}.toast-container .toast-group .toast-group__icon{display:flex;justify-content:flex-start;align-items:flex-start;height:max-content}.toast-container .toast-group .toast-group__text{display:flex;flex-direction:column;gap:2px}.toast-container .toast-group .toast-group__text .toast-group__text--title{font-size:var(--title-font-size);font-weight:600;color:var(--text-color);line-height:1.2rem}.toast-container .toast-group .toast-group__text .toast-group__text--content{font-size:var(--content-font-size);font-weight:500;color:var(--text-color);line-height:130%}.toast-container .toast-timer{height:4px;position:absolute;top:0;left:0;border-radius:8px;animation:widthAnimation var(--animation-speed) linear;background:linear-gradient(45deg,#2b6bbf,#10425b);animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.toast-container:not(.dynamic){cursor:pointer}.toast-container.right{transform:translate(120%)}.toast-container.left{transform:translate(-120%)}.toast-container.visible{transform:translate(0);opacity:1}.toast-container.visible:hover{opacity:.9}.toast-container.visible:hover .toast-timer{animation-play-state:paused}@keyframes widthAnimation{0%{width:0%}to{width:100%}}.toast-container.danger{background:linear-gradient(45deg,#d10303,#f77676)}.toast-container.success{background:linear-gradient(45deg,#00bd6e,#58d77c)}.toast-container.info{background:linear-gradient(45deg,#5b9dcb,#9cd1f7)}.toast-container.warning{background:linear-gradient(45deg,#f58802,#ffc600)}.toast-container svg{color:var(--text-color);fill:var(--text-color);width:1rem;height:1rem}.toast-container img{width:1rem}\n", "*,*:after,*:before{font-family:var(--font-family);box-sizing:border-box;padding:0;margin:0}\n"] }]
        }], ctorParameters: () => [], propDecorators: { onClick: [{
                type: HostListener,
                args: ['click', ['$event']]
            }], container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }], toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }] } });

class ToastsComponent {
    toastService = inject(ToastService);
    config = inject(TOAST_CONFIG);
    toasts = this.toastService.toasts;
    position;
    bottomRight = ToastPosition.BOTTOM_RIGHT;
    bottomLeft = ToastPosition.BOTTOM_LEFT;
    topRight = ToastPosition.TOP_RIGHT;
    topLeft = ToastPosition.TOP_LEFT;
    style;
    constructor() {
        this.position = this.config.position ?? ToastPosition.BOTTOM_RIGHT;
        this.style = this.buildStyles();
    }
    buildStyles() {
        const family = `--font-family: ${this.config.font?.family ?? 'sans-serif'}`;
        const titleSize = `--title-font-size: ${this.config.font?.titleFontSize ?? '1.2rem'}`;
        const contentSize = `--content-font-size: ${this.config.font?.contentFontSize ?? '1rem'}`;
        return `${family}; ${titleSize}; ${contentSize}`;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: ToastsComponent, isStandalone: true, selector: "french-toast", ngImport: i0, template: "@if (toasts().length) {\r\n  <div\r\n    class=\"toasts-container\"\r\n    [style]=\"style\"\r\n    [class.bottom-right]=\"position === bottomRight\"\r\n    [class.bottom-left]=\"position === bottomLeft\"\r\n    [class.top-left]=\"position === topLeft\"\r\n    [class.top-right]=\"position === topRight\"\r\n  >\r\n    @for (toast of toasts(); track toast._uId) {\r\n      <toast [toast]=\"toast\" />\r\n    }\r\n  </div>\r\n}\r\n", styles: [".toasts-container{position:fixed;display:flex;gap:.5rem;z-index:1050;padding:1rem}@media screen and (max-width:768px){.toasts-container{width:100%}}.toasts-container.bottom-right{bottom:0rem;right:0rem;flex-direction:column}.toasts-container.bottom-left{bottom:0rem;left:0rem;flex-direction:column}.toasts-container.top-right{top:0rem;right:0rem;flex-direction:column-reverse}.toasts-container.top-left{top:0rem;left:0rem;flex-direction:column-reverse}\n", "*,*:after,*:before{font-family:var(--font-family);box-sizing:border-box;padding:0;margin:0}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "toast", inputs: ["toast"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ToastsComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'french-toast', imports: [ToastComponent], template: "@if (toasts().length) {\r\n  <div\r\n    class=\"toasts-container\"\r\n    [style]=\"style\"\r\n    [class.bottom-right]=\"position === bottomRight\"\r\n    [class.bottom-left]=\"position === bottomLeft\"\r\n    [class.top-left]=\"position === topLeft\"\r\n    [class.top-right]=\"position === topRight\"\r\n  >\r\n    @for (toast of toasts(); track toast._uId) {\r\n      <toast [toast]=\"toast\" />\r\n    }\r\n  </div>\r\n}\r\n", styles: [".toasts-container{position:fixed;display:flex;gap:.5rem;z-index:1050;padding:1rem}@media screen and (max-width:768px){.toasts-container{width:100%}}.toasts-container.bottom-right{bottom:0rem;right:0rem;flex-direction:column}.toasts-container.bottom-left{bottom:0rem;left:0rem;flex-direction:column}.toasts-container.top-right{top:0rem;right:0rem;flex-direction:column-reverse}.toasts-container.top-left{top:0rem;left:0rem;flex-direction:column-reverse}\n", "*,*:after,*:before{font-family:var(--font-family);box-sizing:border-box;padding:0;margin:0}\n"] }]
        }], ctorParameters: () => [] });

class FrenchToastModule {
    static forRoot(config = {}) {
        return {
            ngModule: FrenchToastModule,
            providers: [
                { provide: TOAST_CONFIG, useValue: config },
                { provide: TOASTS_CONTAINER, useValue: ToastsComponent }
            ]
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrenchToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: FrenchToastModule });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrenchToastModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrenchToastModule, decorators: [{
            type: NgModule,
            args: [{}]
        }] });

const provideFrenchToast = (config = {}) => {
    const providers = [
        { provide: TOAST_CONFIG, useValue: config },
        { provide: TOASTS_CONTAINER, useValue: ToastsComponent }
    ];
    return makeEnvironmentProviders(providers);
};

/*
 * Public API Surface of ngx-french-toast
 */

/**
 * Generated bundle index. Do not edit.
 */

export { FrenchToastModule, ToastComponent, ToastPosition, ToastService, ToastType, ToastsComponent, provideFrenchToast };
//# sourceMappingURL=ngx-french-toast.mjs.map