import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-b78a8f7e.js';

const TOAST_CONTEXT_ICONS = {
    danger: 'M24 4C12.96 4 4 12.95 4 24s8.96 20 20 20 20-8.95 20-20S35.04 4 24 4zm2 30h-4v-4h4v4zm0-8h-4V14h4v12z',
    info: 'M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z',
    success: 'M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z',
    warn: 'M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z'
};
const Toast = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * The toast context which defaults to intro.
         * Options are: "success"`, `"danger"`, `"warn"`, and `"info"`.
         */
        this.context = 'info';
        this.autoDismiss = null;
        this.anjToastDidDismiss = createEvent(this, "anjToastDidDismiss", 7);
    }
    async componentDidLoad() {
        if (this.context !== 'danger' && this.context !== 'warn') {
            this.autoDismiss = new Promise(resolve => {
                this.autoTimer = window.setTimeout(() => {
                    resolve(this.dismiss());
                }, Toast.toastTime);
            });
        }
    }
    async componentDidRender() {
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.active = true;
                const closeBtn = this.element.querySelector('anj-button button');
                closeBtn.focus();
                resolve();
            });
        });
    }
    /**
     * Dismiss the toast
     */
    async dismiss() {
        this.active = false;
        window.clearTimeout(this.autoTimer);
        return new Promise(resolve => {
            window.setTimeout(() => {
                this.anjToastDidDismiss.emit(this.toConfig());
                this.element.remove();
                resolve();
            }, Toast.closeDelay);
        });
    }
    toConfig() {
        return {
            header: this.header,
            message: this.message,
            context: this.context
        };
    }
    render() {
        return (h(Host, { class: { 'anj-active': true } }, h("div", { class: "anj-toast-content" }, this.header ? h("h5", { class: "anj-toast-header" }, this.header) : '', this.message), h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48" }, h("path", { d: TOAST_CONTEXT_ICONS[this.context] })), h("anj-button-close", { free: true, context: "floating", onClick: () => this.dismiss() })));
    }
    get element() { return getElement(this); }
    static get style() { return ".sc-anj-toast-h {\n  display: block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);\n  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);\n  background-color: var(--anj-tertiary);\n  border: 4px solid var(--anj-tertiary);\n  border-radius: 0.25rem;\n  margin-bottom: 1rem;\n  opacity: 0;\n  padding-left: 3.2rem;\n  position: relative;\n  -webkit-transition: opacity 0.3s ease;\n  transition: opacity 0.3s ease;\n  z-index: 1060;\n}\n.sc-anj-toast-h, .sc-anj-toast-h::before, .sc-anj-toast-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-toast-h:focus, .sc-anj-toast-h:active, .sc-anj-toast-h *.sc-anj-toast:focus, .sc-anj-toast-h *.sc-anj-toast:active {\n  outline: none;\n}\n.anj-active.sc-anj-toast-h {\n  opacity: 1;\n}\n[context=danger].sc-anj-toast-h {\n  background-color: var(--anj-danger);\n  border-color: var(--anj-danger);\n}\n[context=success].sc-anj-toast-h {\n  background-color: var(--anj-success);\n  border-color: var(--anj-success);\n}\n[context=warn].sc-anj-toast-h {\n  background-color: var(--anj-warning);\n  border-color: var(--anj-warning);\n}\n.sc-anj-toast-h .anj-toast-content.sc-anj-toast {\n  background-color: var(--anj-light);\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  padding: 1rem 1.75rem 1rem 1rem;\n  word-wrap: break-word;\n}\n.sc-anj-toast-h .anj-toast-content.sc-anj-toast .anj-toast-header.sc-anj-toast {\n  font-weight: 600;\n  letter-spacing: var(--anj-spacing-wide);\n  margin: 0 0 0.25rem;\n}\n.sc-anj-toast-h svg.sc-anj-toast {\n  fill: var(--anj-light);\n  left: 0;\n  position: absolute;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  transform: translateY(-50%);\n}\n.sc-anj-toast-h anj-button-close.sc-anj-toast {\n  position: absolute;\n  right: -0.25rem;\n  top: -0.25rem;\n}"; }
};
Toast.closeDelay = 350;
Toast.toastTime = 4000;

export { Toast as anj_toast };
