import * as i0 from '@angular/core';
import { signal, Component, ChangeDetectionStrategy, ViewEncapsulation, HostListener, createComponent, Injectable } from '@angular/core';

class NotificationComponent {
    constructor() {
        this._content = signal('');
        this._closeButtonLabel = signal('');
        /**
         * Whether or not the notification is entering into view.
         */
        this._enter = signal(false);
        this._theme = signal('light');
        this._className = signal(undefined);
    }
    open(notificationConfiguration) {
        const defaultCloseButtonLabel = 'Close';
        const defaultTheme = 'light';
        this._className.set(notificationConfiguration.className);
        this._closeButtonLabel.set(notificationConfiguration.closeButtonLabel || defaultCloseButtonLabel);
        this._content.set(notificationConfiguration.content);
        this._theme.set(notificationConfiguration.theme || defaultTheme);
        this._enter.set(true);
    }
    setAfterClosedListener(fn) {
        this._afterClosedListener = fn;
    }
    close() {
        this._enter.set(false);
    }
    _onPreventClickEventFromBubbling(event) {
        event.stopPropagation();
    }
    _onAnimationEnd() {
        if (!this._enter()) {
            this._afterClosedListener?.();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: NotificationComponent, selector: "lc-notification", host: { listeners: { "click": "_onPreventClickEventFromBubbling($event)", "animationend": "_onAnimationEnd()" }, properties: { "class": "\"lc-notification \" + (_theme() + \" \") + (_enter() ? \"enter\" : \"leave\") + (_className() ? \" \" + _className() : \"\")" } }, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div\n    class=\"lc-notification__backdrop\"\n    (click)=\"close()\"></div>\n<div class=\"lc-notification__body\">\n    <div\n        class=\"lc-notification__content\"\n        [innerHTML]=\"_content()\"></div>\n    <button\n        class=\"lc-notification__action close\"\n        aria-label=\"Close notification\"\n        type=\"button\"\n        (click)=\"close()\">\n        {{ _closeButtonLabel() }}\n    </button>\n</div>\n", styles: [".lc-notification,.lc-notification__backdrop{position:fixed;width:100vw;height:100vh;left:0;top:0}.lc-notification{display:flex;align-items:flex-end;justify-content:center;z-index:9999;animation:.25s cubic-bezier(.04,.54,.25,1) forwards}.lc-notification.enter .lc-notification__body{animation-name:notification-animate-body-enter}.lc-notification.leave .lc-notification__body{animation-name:notification-animate-body-leave}.lc-notification.light{--notification-bg-color: #fff;--notification-text-color: #000;--notification-shadow: 0px .5rem .75rem rgba(0, 0, 0, .08), 0px .25rem 3rem rgba(0, 0, 0, .08);--notification-close-btn-hover-bg-color: #f7f5f5;--notification-close-btn-text-color: #000;--notification-divider-color: rgba(0, 0, 0, .04)}.lc-notification.dark{--notification-bg-color: #353535;--notification-text-color: #fff;--notification-shadow: 0px .5rem .75rem rgba(0, 0, 0, .15), 0px .25rem 3rem rgba(0, 0, 0, .15);--notification-close-btn-hover-bg-color: #444;--notification-close-btn-text-color: #e8d0ff;--notification-divider-color: rgba(255, 255, 255, .08)}@keyframes notification-animate-body-enter{0%{transform:translateY(60%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes notification-animate-body-leave{0%{transform:translateY(0);opacity:1}to{transform:translateY(60%);opacity:0}}.lc-notification__body{position:fixed;bottom:20px;display:flex;align-items:center;box-sizing:border-box;min-height:60px;border-radius:5px;z-index:10000;animation:.25s cubic-bezier(.04,.54,.25,1) forwards;max-width:95vw;line-height:20px;backface-visibility:hidden;background-color:var(--notification-bg-color);box-shadow:var(--notification-shadow);color:var(--notification-text-color);font-size:1.1rem}.lc-notification__content{padding:20px 20px 20px 15px;border-right:1px solid var(--notification-divider-color);min-width:300px;max-width:450px;word-break:normal;overflow-wrap:anywhere;box-sizing:border-box}.lc-notification__action.close{box-sizing:border-box;background-color:transparent;border:none;font-size:.95rem;margin:0 10px;cursor:pointer;border-radius:4px;padding:8px 15px;transition:background-color .25s cubic-bezier(.04,.54,.25,1);color:var(--notification-close-btn-text-color);font-family:inherit}.lc-notification__action.close:hover{background-color:var(--notification-close-btn-hover-bg-color)}@media (max-width: 385px){.lc-notification__content{min-width:70vw}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NotificationComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        '[class]': 
                        // eslint-disable-next-line max-len
                        '"lc-notification " + (_theme() + " ") + (_enter() ? "enter" : "leave") + (_className() ? " " + _className() : "")'
                    }, selector: 'lc-notification', template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div\n    class=\"lc-notification__backdrop\"\n    (click)=\"close()\"></div>\n<div class=\"lc-notification__body\">\n    <div\n        class=\"lc-notification__content\"\n        [innerHTML]=\"_content()\"></div>\n    <button\n        class=\"lc-notification__action close\"\n        aria-label=\"Close notification\"\n        type=\"button\"\n        (click)=\"close()\">\n        {{ _closeButtonLabel() }}\n    </button>\n</div>\n", styles: [".lc-notification,.lc-notification__backdrop{position:fixed;width:100vw;height:100vh;left:0;top:0}.lc-notification{display:flex;align-items:flex-end;justify-content:center;z-index:9999;animation:.25s cubic-bezier(.04,.54,.25,1) forwards}.lc-notification.enter .lc-notification__body{animation-name:notification-animate-body-enter}.lc-notification.leave .lc-notification__body{animation-name:notification-animate-body-leave}.lc-notification.light{--notification-bg-color: #fff;--notification-text-color: #000;--notification-shadow: 0px .5rem .75rem rgba(0, 0, 0, .08), 0px .25rem 3rem rgba(0, 0, 0, .08);--notification-close-btn-hover-bg-color: #f7f5f5;--notification-close-btn-text-color: #000;--notification-divider-color: rgba(0, 0, 0, .04)}.lc-notification.dark{--notification-bg-color: #353535;--notification-text-color: #fff;--notification-shadow: 0px .5rem .75rem rgba(0, 0, 0, .15), 0px .25rem 3rem rgba(0, 0, 0, .15);--notification-close-btn-hover-bg-color: #444;--notification-close-btn-text-color: #e8d0ff;--notification-divider-color: rgba(255, 255, 255, .08)}@keyframes notification-animate-body-enter{0%{transform:translateY(60%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes notification-animate-body-leave{0%{transform:translateY(0);opacity:1}to{transform:translateY(60%);opacity:0}}.lc-notification__body{position:fixed;bottom:20px;display:flex;align-items:center;box-sizing:border-box;min-height:60px;border-radius:5px;z-index:10000;animation:.25s cubic-bezier(.04,.54,.25,1) forwards;max-width:95vw;line-height:20px;backface-visibility:hidden;background-color:var(--notification-bg-color);box-shadow:var(--notification-shadow);color:var(--notification-text-color);font-size:1.1rem}.lc-notification__content{padding:20px 20px 20px 15px;border-right:1px solid var(--notification-divider-color);min-width:300px;max-width:450px;word-break:normal;overflow-wrap:anywhere;box-sizing:border-box}.lc-notification__action.close{box-sizing:border-box;background-color:transparent;border:none;font-size:.95rem;margin:0 10px;cursor:pointer;border-radius:4px;padding:8px 15px;transition:background-color .25s cubic-bezier(.04,.54,.25,1);color:var(--notification-close-btn-text-color);font-family:inherit}.lc-notification__action.close:hover{background-color:var(--notification-close-btn-hover-bg-color)}@media (max-width: 385px){.lc-notification__content{min-width:70vw}}\n"] }]
        }], propDecorators: { _onPreventClickEventFromBubbling: [{
                type: HostListener,
                args: ['click', ['$event']]
            }], _onAnimationEnd: [{
                type: HostListener,
                args: ['animationend']
            }] } });

/**
 * A singleton service to programmatically show notifications.
 */
class NotificationService {
    /**
     * The number of milliseconds after which the notification is closed.
     */
    static { this.DEFAULT_AUTO_CLOSE_MS = 10_000; }
    static { this._defaultTheme = 'light'; }
    static { this._defaultCloseButtonLabel = 'Close'; }
    constructor(_applicationRef) {
        this._applicationRef = _applicationRef;
        this._openedNotifications = [];
    }
    /**
     * Set the default theme that will be used for all notifications created in the future.
     *
     * @param theme The new theme to be used as the default.
     */
    static setDefaultTheme(theme) {
        NotificationService._defaultTheme = theme;
    }
    /**
     * Set the default label for the close button. Default is `Close`.
     */
    static setDefaultCloseButtonLabel(label) {
        NotificationService._defaultCloseButtonLabel = label;
    }
    /**
     * Open a notification using the provided configuration. The opened notification
     * will be closed automatically after 10 seconds by default.
     *
     * @param notificationConfiguration The notification configuration object.
     */
    open(notificationConfiguration) {
        this._closeAll();
        const notificationComponentRef = createComponent(NotificationComponent, {
            environmentInjector: this._applicationRef.injector
        });
        const notificationComponent = notificationComponentRef.instance;
        notificationComponent.setAfterClosedListener(() => {
            notificationComponentRef.destroy();
        });
        if (notificationConfiguration.theme === undefined) {
            notificationConfiguration.theme = NotificationService._defaultTheme;
        }
        if (notificationConfiguration.closeButtonLabel === undefined) {
            notificationConfiguration.closeButtonLabel = NotificationService._defaultCloseButtonLabel;
        }
        notificationComponent.open(notificationConfiguration);
        this._applicationRef.attachView(notificationComponentRef.hostView);
        document.body.appendChild(notificationComponentRef.location.nativeElement);
        this._openedNotifications.push(notificationComponent);
        setTimeout(() => {
            notificationComponent.close();
        }, notificationConfiguration.autoCloseMs || NotificationService.DEFAULT_AUTO_CLOSE_MS);
    }
    _closeAll() {
        for (const notification of this._openedNotifications) {
            notification.close();
        }
        this._openedNotifications = [];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NotificationService, deps: [{ token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NotificationService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NotificationService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: () => [{ type: i0.ApplicationRef }] });

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

export { NotificationService };
//# sourceMappingURL=babybeet-angular-notification.mjs.map
