import { MXBaseComponent, AXClosableComponent, AXComponent } from '@acorex/cdk/common';
import { AXDecoratorCloseButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
import { AXTranslationService, AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
import { AsyncPipe, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { InjectionToken, inject, signal, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { AXOverlayService } from '@acorex/cdk/overlay';
import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
import { set } from 'lodash-es';
import { AXButtonModule } from '@acorex/components/button';
import { AXLoadingModule } from '@acorex/components/loading';

const AX_TOAST_CONFIG = new InjectionToken('AX_TOAST_CONFIG', {
    providedIn: 'root',
    factory: () => {
        const global = inject(AX_GLOBAL_CONFIG);
        set(global, 'layout.toast', AX_TOAST_CONFIG);
        return AXToastDefaultConfig;
    },
});
const AXToastDefaultConfig = {
    gap: 5,
    timeOut: 2500,
    timeOutProgress: true,
    location: 'bottom-center',
    limit: 3,
    pauseOnHover: true,
};
function toastConfig(config = {}) {
    const result = {
        ...AXToastDefaultConfig,
        ...config,
    };
    return result;
}

let toastIdCounter = 0;
class AXToastService {
    constructor() {
        this.overlayService = inject(AXOverlayService);
        this.defaultConfig = inject(AX_TOAST_CONFIG);
        this.translationService = inject(AXTranslationService);
        this.reserveCounter = signal(0, ...(ngDevMode ? [{ debugName: "reserveCounter" }] : []));
        this.activeToasts = signal([], ...(ngDevMode ? [{ debugName: "activeToasts" }] : []));
        this.reservedToasts = signal([], ...(ngDevMode ? [{ debugName: "reservedToasts" }] : []));
        this.toastCounterRef = signal(null, ...(ngDevMode ? [{ debugName: "toastCounterRef" }] : []));
        this.moreToastsConfig = signal({ color: 'primary', location: 'bottom-center' }, ...(ngDevMode ? [{ debugName: "moreToastsConfig" }] : []));
    }
    /**
     * Shows a primary toast notification.
     *
     * @param content - The message content to display.
     */
    primary(content) {
        this.show({
            timeOut: this.defaultConfig.timeOut,
            color: 'primary',
            content: content,
        });
    }
    /**
     * Shows a secondary toast notification.
     *
     * @param content - The message content to display.
     */
    secondary(content) {
        this.show({
            timeOut: this.defaultConfig.timeOut,
            color: 'secondary',
            content: content,
        });
    }
    /**
     * Shows a success toast notification.
     *
     * @param content - The message content to display.
     */
    success(content) {
        this.show({
            timeOut: this.defaultConfig.timeOut,
            color: 'success',
            content: content,
        });
    }
    /**
     * Shows a warning toast notification.
     *
     * @param content - The message content to display.
     */
    warning(content) {
        this.show({
            timeOut: this.defaultConfig.timeOut,
            color: 'warning',
            content: content,
        });
    }
    /**
     * Shows a danger toast notification.
     *
     * @param content - The message content to display.
     */
    danger(content) {
        this.show({
            timeOut: this.defaultConfig.timeOut,
            color: 'danger',
            content: content,
        });
    }
    /**
     * Shows a default toast notification.
     *
     * @param content - The message content to display.
     */
    default(content) {
        this.show({
            timeOut: this.defaultConfig.timeOut,
            color: 'default',
            content: content,
        });
    }
    /**
     * Shows a toast notification with the specified configuration.
     *
     * @param config - The toast display configuration.
     * @returns AXToastRef - Reference to the created toast for programmatic control.
     */
    show(config) {
        config = { ...this.defaultConfig, ...config };
        this.moreToastsConfig.set({
            color: config.color,
            location: config.location,
            timeOut: config.timeOut,
            timeOutProgress: config.timeOutProgress,
        });
        if (this.defaultConfig.limit > 0 && this.activeToasts().length >= this.defaultConfig.limit) {
            const reservedRef = {
                close: () => {
                    console.warn('Reserved notification cannot be closed until it is displayed.');
                },
            };
            this.reservedToasts.update((prev) => [...prev, { config, reservedRef }]);
            this.handleReservedToastCounter();
            return reservedRef;
        }
        return this.displayToast(config);
    }
    displayToast(config) {
        const gap = this.defaultConfig.gap;
        const toastData = {
            icon: config.icon,
            title: config.title,
            content: config.content,
            location: config.location,
            closeButton: config.closeButton ?? true,
            color: config.color,
            timeOut: config.timeOut,
            timeOutProgress: config.timeOutProgress ?? true,
            pauseOnHover: config.pauseOnHover,
        };
        const toastId = `toast-${++toastIdCounter}`;
        let internalRef;
        const closeToast = () => {
            if (internalRef) {
                internalRef.overlayRef.dispose();
                this.activeToasts.set(this.activeToasts().filter((t) => t.id !== internalRef.id));
                this.handleShowReservedToast();
                this.handleReservedToastCounter();
                setTimeout(() => {
                    this.reposition(config.location, gap);
                });
            }
        };
        this.overlayService
            .create(AXToastComponent, {
            inputs: {
                config: toastData,
                onClose: closeToast,
            },
            centered: false,
            panelClass: ['ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
            onDispose: () => {
                // Clean up when disposed externally
                const currentToasts = this.activeToasts();
                if (internalRef && currentToasts.find((t) => t.id === internalRef.id)) {
                    this.activeToasts.set(currentToasts.filter((t) => t.id !== internalRef.id));
                    this.handleShowReservedToast();
                    this.handleReservedToastCounter();
                }
            },
        })
            .then((overlayRef) => {
            internalRef = {
                id: toastId,
                overlayRef,
                config: toastData,
                close: closeToast,
            };
            // Position the toast BEFORE adding to activeToasts (so getPosition calculates correctly)
            this.positionToast(overlayRef.overlayElement, config.location, gap);
            this.activeToasts.update((prev) => [...prev, internalRef]);
            this.handleReservedToastCounter();
        });
        return {
            close: () => {
                closeToast();
            },
        };
    }
    /**
     * Hides all active toast notifications.
     */
    hideAll() {
        this.reserveCounter.set(0);
        this.reservedToasts.set([]);
        // Close all active toasts
        this.activeToasts().forEach((toast) => {
            toast.overlayRef.dispose();
        });
        this.activeToasts.set([]);
        // Close counter toast if exists
        const counterRef = this.toastCounterRef();
        if (counterRef) {
            counterRef.overlayRef.dispose();
            this.toastCounterRef.set(null);
        }
        this.handleReservedToastCounter();
    }
    handleShowReservedToast() {
        if (this.activeToasts().length > this.defaultConfig.limit - 1)
            return;
        if (!this.reservedToasts().length)
            return;
        const reserved = this.reservedToasts()[0];
        this.reservedToasts.update((prev) => prev.slice(1));
        const displayedRef = this.displayToast(reserved.config);
        this.handleReservedToastCounter();
        reserved.reservedRef.close = displayedRef.close;
    }
    handleReservedToastCounter() {
        const reservedCount = this.reservedToasts().length;
        if (reservedCount === this.reserveCounter())
            return;
        this.reserveCounter.set(reservedCount);
        if (reservedCount === 0 && this.toastCounterRef() !== null) {
            this.toastCounterRef().close();
            this.toastCounterRef.set(null);
            return;
        }
        if (reservedCount > 0) {
            if (this.toastCounterRef() !== null) {
                this.toastCounterRef().close();
                this.toastCounterRef.set(null);
            }
            const firstToast = this.activeToasts()[0];
            if (firstToast) {
                const toastComponent = firstToast.overlayRef.instance.instance;
                const remainingTime = toastComponent.createdDate();
                this.createReservedCounterToast(remainingTime);
            }
        }
    }
    async createReservedCounterToast(remainingTime) {
        const gap = this.defaultConfig.gap;
        const timeOut = Math.min(this.moreToastsConfig().timeOut - (new Date().getTime() - remainingTime), this.moreToastsConfig().timeOut);
        const opt = {
            closeButton: false,
            color: this.moreToastsConfig().color,
            location: this.moreToastsConfig().location,
            title: await this.translationService.translateAsync('@acorex:common.notifications.more', {
                params: { number: this.reserveCounter() },
            }),
            timeOut,
            timeOutProgress: this.moreToastsConfig().timeOutProgress,
            closeAllButton: true,
        };
        const toastId = `toast-counter-${++toastIdCounter}`;
        let counterInternalRef;
        const closeCounter = () => {
            if (counterInternalRef) {
                counterInternalRef.overlayRef.dispose();
                if (this.toastCounterRef()?.id === counterInternalRef.id) {
                    this.toastCounterRef.set(null);
                }
            }
        };
        const overlayRef = await this.overlayService.create(AXToastComponent, {
            inputs: {
                config: opt,
                onClose: closeCounter,
            },
            centered: false,
            panelClass: ['ax-animate-animated', 'ax-animate-fadeIn', 'ax-animate-faster'],
        });
        counterInternalRef = {
            id: toastId,
            overlayRef,
            config: opt,
            close: closeCounter,
        };
        this.toastCounterRef.set(counterInternalRef);
        // Position the counter toast
        this.positionToast(overlayRef.overlayElement, opt.location, gap);
    }
    positionToast(element, location, gap) {
        if (!element)
            return;
        const pos = this.getPosition(location) + gap;
        // Override the centered overlay container styles for toast positioning
        element.style.width = 'max-content';
        element.style.height = 'auto';
        element.style.display = 'block';
        element.style.alignItems = '';
        element.style.justifyContent = '';
        // Reset all positioning styles
        element.style.top = '';
        element.style.bottom = '';
        element.style.left = '';
        element.style.right = '';
        element.style.transform = '';
        // Apply position based on location
        switch (location) {
            case 'bottom-center':
                element.style.bottom = pos + 'px';
                element.style.left = '50%';
                element.style.transform = 'translateX(-50%)';
                break;
            case 'bottom-end':
                element.style.bottom = pos + 'px';
                element.style.right = gap + 'px';
                break;
            case 'bottom-start':
                element.style.bottom = pos + 'px';
                element.style.left = gap + 'px';
                break;
            case 'top-center':
                element.style.top = pos + 'px';
                element.style.left = '50%';
                element.style.transform = 'translateX(-50%)';
                break;
            case 'top-end':
                element.style.top = pos + 'px';
                element.style.right = gap + 'px';
                break;
            case 'top-start':
                element.style.top = pos + 'px';
                element.style.left = gap + 'px';
                break;
            case 'center-start':
                element.style.top = '50%';
                element.style.left = gap + 'px';
                element.style.transform = 'translateY(-50%)';
                break;
            case 'center-end':
                element.style.top = '50%';
                element.style.right = gap + 'px';
                element.style.transform = 'translateY(-50%)';
                break;
        }
    }
    reposition(toastLocation, gap) {
        const list = this.activeToasts().filter((t) => t.config?.location === toastLocation);
        list.forEach((toast, index) => {
            const element = toast.overlayRef.overlayElement;
            if (!element)
                return;
            const pos = this.getRepositionPosition(index, gap, list, toastLocation);
            this.applyRepositionPosition(element, toastLocation, pos, gap);
        });
    }
    getRepositionPosition(index, gap, list, toastLocation) {
        if (index === 0)
            return gap;
        const previousToast = list[index - 1];
        const previousElement = previousToast.overlayRef.overlayElement;
        if (!previousElement)
            return gap;
        if (toastLocation.split('-')[0] === 'bottom') {
            return window.innerHeight - previousElement.offsetTop + gap;
        }
        return previousElement.offsetTop + previousElement.offsetHeight + gap;
    }
    applyRepositionPosition(element, location, pos, gap) {
        // Reset transform if needed, then apply position
        const isVerticalCenter = location === 'center-start' || location === 'center-end';
        const isHorizontalCenter = location === 'bottom-center' || location === 'top-center';
        if (location.startsWith('bottom')) {
            element.style.bottom = pos + 'px';
            element.style.top = '';
            if (isHorizontalCenter) {
                element.style.transform = 'translateX(-50%)';
            }
        }
        else if (location.startsWith('top')) {
            element.style.top = pos + 'px';
            element.style.bottom = '';
            if (isHorizontalCenter) {
                element.style.transform = 'translateX(-50%)';
            }
        }
        else if (isVerticalCenter) {
            element.style.top = pos + 'px';
            element.style.bottom = '';
            element.style.transform = '';
        }
    }
    getPosition(location) {
        const list = this.activeToasts().filter((t) => t.config?.location === location);
        if (list.length === 0)
            return 0;
        const lastToast = list[list.length - 1];
        const element = lastToast.overlayRef.overlayElement;
        if (!element)
            return 0;
        if (location.split('-')[0] === 'bottom') {
            return window.innerHeight - element.offsetTop;
        }
        return element.offsetTop + element.offsetHeight;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXToastService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXToastService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

/**
 * The Button is a component which detects user interaction and triggers a corresponding event
 *
 * @category Components
 */
class AXToastComponent extends MXBaseComponent {
    constructor() {
        super(...arguments);
        /** Toast configuration data */
        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
        /** @internal Callback function to close the toast */
        this.onClose = input(...(ngDevMode ? [undefined, { debugName: "onClose" }] : []));
        this.toastService = inject(AXToastService);
        this.createdDate = signal(0, ...(ngDevMode ? [{ debugName: "createdDate" }] : []));
        this.isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : []));
        this.remainingTime = signal(0, ...(ngDevMode ? [{ debugName: "remainingTime" }] : []));
        this.transitionDuration = signal(150, ...(ngDevMode ? [{ debugName: "transitionDuration" }] : []));
        /** @ignore */
        this._toastWidth = 100;
    }
    /** @ignore */
    ngOnInit() {
        super.ngOnInit();
        this._initIcon();
        this.createdDate.set(new Date().getTime());
        this.remainingTime.set(this.config().timeOut);
        this._handleTimeOut();
        this.getHostElement().addEventListener('pointerenter', () => {
            if (!this.config().pauseOnHover)
                return;
            if (this.isPaused())
                return;
            // Only pause if not already paused
            this.isPaused.set(true);
            this.pauseAnimation();
        });
        this.getHostElement().addEventListener('pointerleave', () => {
            if (!this.config().pauseOnHover)
                return;
            if (!this.isPaused())
                return;
            // Only resume if paused
            this.isPaused.set(false);
            this._handleTimeOut();
        });
    }
    pauseAnimation() {
        clearInterval(this.intervalId);
    }
    _handleTimeOut() {
        if (this.config().timeOut) {
            this.intervalId = setInterval(() => {
                this.remainingTime.update((prev) => prev - this.transitionDuration());
                if (this.remainingTime() <= 0) {
                    clearInterval(this.intervalId);
                    this.close();
                }
            }, this.transitionDuration());
        }
    }
    _initIcon() {
        if (!this.config().icon) {
            switch (this.config().color) {
                case 'success':
                    this._icon = 'ax-icon ax-icon-check-circle';
                    break;
                case 'warning':
                    this._icon = 'ax-icon ax-icon-warning';
                    break;
                case 'danger':
                    this._icon = 'ax-icon ax-icon-error';
                    break;
                default:
                    this._icon = this.config().icon || 'ax-icon ax-icon-info';
                    break;
            }
        }
        else {
            this._icon = this.config().icon;
        }
    }
    /** @ignore */
    _handleButtonClick(button) {
        if (button.onClick) {
            button.onClick({ source: button });
        }
    }
    /**
     * Closes the toast notification.
     */
    close() {
        const closeCallback = this.onClose();
        if (closeCallback) {
            closeCallback();
        }
    }
    /**
     * Closes all toast notifications.
     */
    closeAll() {
        this.toastService.hideAll();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXToastComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXToastComponent, isStandalone: true, selector: "ax-toast", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onClose: { classPropertyName: "onClose", publicName: "onClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"ax-\" + config().color" } }, providers: [
            { provide: AXClosableComponent, useExisting: AXToastComponent },
            { provide: AXComponent, useExisting: AXToastComponent },
        ], usesInheritance: true, ngImport: i0, template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n  <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config().title && config().content\">\n    {{ config().title | translate | async }}\n  </div>\n  <div>{{ config().content | translate | async }}</div>\n</div>\n@if (config().closeButton) {\n  <ax-close-button></ax-close-button>\n} @else if (config().closeAllButton) {\n  <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config().timeOutProgress && config().timeOut) {\n  <div\n    class=\"ax-toast-progress\"\n    [style.transition-duration]=\"transitionDuration()\"\n    [style.width]=\"(remainingTime() * 100) / config().timeOut + '%'\"\n  ></div>\n}\n", styles: ["ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-darkest-surface)}.ax-dark ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-lightest-surface)}ax-toast.ax-primary{--ax-comp-toast-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-primary-darker-surface)}ax-toast.ax-secondary{--ax-comp-toast-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-secondary-darker-surface)}ax-toast.ax-success{--ax-comp-toast-bg-color: var(--ax-sys-color-success-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-success-darker-surface)}ax-toast.ax-warning{--ax-comp-toast-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-warning-darker-surface)}ax-toast.ax-danger{--ax-comp-toast-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-danger-darker-surface)}ax-toast.ax-accent1{--ax-comp-toast-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent1-darker-surface)}ax-toast.ax-accent2{--ax-comp-toast-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent2-darker-surface)}ax-toast.ax-accent3{--ax-comp-toast-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent3-darker-surface)}ax-toast.ax-accent4{--ax-comp-toast-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent4-darker-surface)}ax-toast.ax-accent5{--ax-comp-toast-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent5-darker-surface)}ax-toast.ax-accent6{--ax-comp-toast-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent6-darker-surface)}ax-toast.ax-accent7{--ax-comp-toast-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent7-darker-surface)}ax-toast{position:relative;display:flex;width:98vw;overflow:hidden;padding:.75rem 1rem;--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);color:rgba(var(--ax-comp-toast-text-color));background-color:rgba(var(--ax-comp-toast-bg-color));font-size:var(--ax-comp-toast-font-size, .875rem);line-height:var(--ax-comp-toast-line-height, 1.25rem);border-radius:var(--ax-comp-toast-border-radius, var(--ax-sys-border-radius))}@media (min-width: 768px){ax-toast{width:24rem}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem;max-width:fit-content;align-items:start}ax-toast .ax-toast-icon{margin-inline-end:.5rem}ax-toast .ax-toast-content{display:flex;flex:1 1 0%;flex-direction:column}ax-toast .ax-toast-content .ax-toast-title{font-weight:500;line-height:1.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.75rem;margin-bottom:.75rem;display:flex;gap:.5rem}ax-toast ax-icon-close{height:fit-content}ax-toast ax-icon-close:hover{opacity:.75}ax-toast .ax-toast-progress{width:100%;bottom:0;height:.25rem;position:absolute;inset-inline-end:0px;inset-inline-start:0px;transition-property:width;transition-timing-function:linear;transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-toast-progress-bg-color, 255, 255, 255, .46))}\n"], dependencies: [{ kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXToastComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        '[class]': '"ax-" + config().color',
                    }, providers: [
                        { provide: AXClosableComponent, useExisting: AXToastComponent },
                        { provide: AXComponent, useExisting: AXToastComponent },
                    ], imports: [AXDecoratorCloseButtonComponent, AsyncPipe, AXTranslatorPipe], template: "<span class=\"ax-toast-icon ax-icon-solid {{ _icon }}\"></span>\n<div class=\"ax-toast-content\">\n  <div class=\"ax-toast-title\" [class.ax-mb-2]=\"config().title && config().content\">\n    {{ config().title | translate | async }}\n  </div>\n  <div>{{ config().content | translate | async }}</div>\n</div>\n@if (config().closeButton) {\n  <ax-close-button></ax-close-button>\n} @else if (config().closeAllButton) {\n  <ax-close-button [closeAll]=\"true\"></ax-close-button>\n}\n@if (config().timeOutProgress && config().timeOut) {\n  <div\n    class=\"ax-toast-progress\"\n    [style.transition-duration]=\"transitionDuration()\"\n    [style.width]=\"(remainingTime() * 100) / config().timeOut + '%'\"\n  ></div>\n}\n", styles: ["ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-lighter-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-darkest-surface)}.ax-dark ax-toast.ax-default{--ax-comp-toast-bg-color: var(--ax-sys-color-darker-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-darker-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-lightest-surface)}ax-toast.ax-primary{--ax-comp-toast-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-primary-darker-surface)}ax-toast.ax-secondary{--ax-comp-toast-bg-color: var(--ax-sys-color-secondary-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-secondary-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-secondary-darker-surface)}ax-toast.ax-success{--ax-comp-toast-bg-color: var(--ax-sys-color-success-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-success-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-success-darker-surface)}ax-toast.ax-warning{--ax-comp-toast-bg-color: var(--ax-sys-color-warning-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-warning-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-warning-darker-surface)}ax-toast.ax-danger{--ax-comp-toast-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-danger-darker-surface)}ax-toast.ax-accent1{--ax-comp-toast-bg-color: var(--ax-sys-color-accent1-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent1-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent1-darker-surface)}ax-toast.ax-accent2{--ax-comp-toast-bg-color: var(--ax-sys-color-accent2-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent2-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent2-darker-surface)}ax-toast.ax-accent3{--ax-comp-toast-bg-color: var(--ax-sys-color-accent3-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent3-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent3-darker-surface)}ax-toast.ax-accent4{--ax-comp-toast-bg-color: var(--ax-sys-color-accent4-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent4-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent4-darker-surface)}ax-toast.ax-accent5{--ax-comp-toast-bg-color: var(--ax-sys-color-accent5-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent5-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent5-darker-surface)}ax-toast.ax-accent6{--ax-comp-toast-bg-color: var(--ax-sys-color-accent6-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent6-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent6-darker-surface)}ax-toast.ax-accent7{--ax-comp-toast-bg-color: var(--ax-sys-color-accent7-surface);--ax-comp-toast-text-color: var(--ax-sys-color-on-accent7-surface);--ax-comp-toast-progress-bg-color: var(--ax-sys-color-accent7-darker-surface)}ax-toast{position:relative;display:flex;width:98vw;overflow:hidden;padding:.75rem 1rem;--ax-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--ax-shadow-colored: 0 4px 6px -1px var(--ax-shadow-color), 0 2px 4px -2px var(--ax-shadow-color);box-shadow:var(--ax-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--ax-shadow);color:rgba(var(--ax-comp-toast-text-color));background-color:rgba(var(--ax-comp-toast-bg-color));font-size:var(--ax-comp-toast-font-size, .875rem);line-height:var(--ax-comp-toast-line-height, 1.25rem);border-radius:var(--ax-comp-toast-border-radius, var(--ax-sys-border-radius))}@media (min-width: 768px){ax-toast{width:24rem}}ax-toast .ax-toast-icon,ax-toast .ax-icon-close{font-size:1.25rem;max-width:fit-content;align-items:start}ax-toast .ax-toast-icon{margin-inline-end:.5rem}ax-toast .ax-toast-content{display:flex;flex:1 1 0%;flex-direction:column}ax-toast .ax-toast-content .ax-toast-title{font-weight:500;line-height:1.5rem}ax-toast .ax-toast-content .ax-toast-buttons{margin-top:.75rem;margin-bottom:.75rem;display:flex;gap:.5rem}ax-toast ax-icon-close{height:fit-content}ax-toast ax-icon-close:hover{opacity:.75}ax-toast .ax-toast-progress{width:100%;bottom:0;height:.25rem;position:absolute;inset-inline-end:0px;inset-inline-start:0px;transition-property:width;transition-timing-function:linear;transition-duration:var(--ax-sys-transition-duration);background-color:rgba(var(--ax-comp-toast-progress-bg-color, 255, 255, 255, .46))}\n"] }]
        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], onClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "onClose", required: false }] }] } });

const COMPONENT = [AXToastComponent];
const MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule];
class AXToastModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXToastModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXLoadingModule, AXTranslationModule, AXToastComponent], exports: [AXToastComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXToastModule, providers: [AXToastService], imports: [MODULES, COMPONENT] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXToastModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [AXToastService],
                }]
        }] });

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

export { AXToastComponent, AXToastDefaultConfig, AXToastModule, AXToastService, AX_TOAST_CONFIG, toastConfig };
//# sourceMappingURL=acorex-components-toast.mjs.map
