/*!
 * Built with Stencil
 * By PostNord.
 */
import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
import { a as animateHeightFactory } from './index-CosyroON.js';
import { awaitTopbar, ripple, en } from './index.js';
import { a as alert_exclamation_circle } from './alert_exclamation_circle-B88w-Zxn.js';
import { a as alert_info_circle } from './alert_info_circle-BTqkgfeH.js';
import { c as check_circle } from './check_circle-D4GZ__oQ.js';
import { c as close } from './close-BvuWkoyY.js';

const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.874 2.514a1 1 0 0 0-1.748 0l-10 18A1 1 0 0 0 2 22h20a1 1 0 0 0 .874-1.486zM12 5.06 20.3 20H3.7zm-1.375 4.936a1.38 1.38 0 1 1 2.75 0l-.292 3.509a1.087 1.087 0 0 1-2.166 0zM12 15.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3" clip-rule="evenodd"/></svg>';
const alert_exclamation_triangle = icon;

const translations = {
    HIDE: {
        sv: 'Stäng meddelande',
        en: 'Dismiss message',
        da: 'Afvis besked',
        fi: 'Hylkää viesti',
        no: 'Avvis meldingen',
    },
};

const pnToastCss = () => `${transformTag("pn-toast")}{position:relative;display:block}${transformTag("pn-toast")} .pn-toast{position:relative;color:#2d2013;padding:1em;border-radius:0.5em;outline:none;font-size:1em;font-weight:400;background-color:#e0f8ff;border-color:#005d92;display:flex;align-items:center;gap:0.75em;visibility:visible;transition-property:visibility;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toast")} .pn-toast{transition-duration:0s;transition-delay:0s}}${transformTag("pn-toast")} .pn-toast .pn-ripple{animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background-color:#005d92;transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@keyframes ripple{to{transform:translate(-50%, -50%) scale(1);opacity:0}}${transformTag("pn-toast")} .pn-toast[data-hide]{visibility:hidden;transition-delay:0.2s}${transformTag("pn-toast")} .pn-toast-heading{font-size:1em;font-style:normal;font-weight:500;margin:0}${transformTag("pn-toast")} .pn-toast-text{font-size:1em;font-style:normal;font-weight:400;margin:0 0 0.25em 0}${transformTag("pn-toast")} .pn-toast-text:last-child{margin-bottom:0}${transformTag("pn-toast")} .pn-toast-icon .pn-icon-svg path{fill:#2d2013}${transformTag("pn-toast")} .pn-toast-content{display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:0.25em;margin:0 auto 0 0}${transformTag("pn-toast")} .pn-toast-button{cursor:pointer;border-radius:50%;border:none;background:none;padding:0.25em;font-size:1em;display:flex;align-items:center;justify-content:center;transition-property:background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-toast")} .pn-toast-button{transition-duration:0s;transition-delay:0s}}${transformTag("pn-toast")} .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-toast")} .pn-toast-button:focus-visible{outline-color:#005d92;background-color:#8eddf9}${transformTag("pn-toast")} .pn-toast-button:hover{background-color:#8eddf9}${transformTag("pn-toast")} .pn-toast[data-appearance=success]{background-color:#dcf6e7}${transformTag("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:focus-visible{outline-color:#005e41;background-color:#abe3bb}${transformTag("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-button:hover{background-color:#abe3bb}${transformTag("pn-toast")} .pn-toast[data-appearance=success] .pn-ripple{background-color:#005e41}${transformTag("pn-toast")} .pn-toast[data-appearance=success] .pn-toast-icon .pn-icon-svg path{fill:#005e41}${transformTag("pn-toast")} .pn-toast[data-appearance=success][data-temporary]{border-color:#005e41}${transformTag("pn-toast")} .pn-toast[data-appearance=warning]{background-color:#fff1e3}${transformTag("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:focus-visible{outline-color:#99290a;background-color:#ffc8a3}${transformTag("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-button:hover{background-color:#ffc8a3}${transformTag("pn-toast")} .pn-toast[data-appearance=warning] .pn-ripple{background-color:#99290a}${transformTag("pn-toast")} .pn-toast[data-appearance=warning] .pn-toast-icon .pn-icon-svg path{fill:#99290a}${transformTag("pn-toast")} .pn-toast[data-appearance=warning][data-temporary]{border-color:#ed7123}${transformTag("pn-toast")} .pn-toast[data-appearance=error]{background-color:#fdefee}${transformTag("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:focus-visible{outline-color:#a70707;background-color:#fbc2c1}${transformTag("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-button:hover{background-color:#fbc2c1}${transformTag("pn-toast")} .pn-toast[data-appearance=error] .pn-ripple{background-color:#a70707}${transformTag("pn-toast")} .pn-toast[data-appearance=error] .pn-toast-icon .pn-icon-svg path{fill:#a70707}${transformTag("pn-toast")} .pn-toast[data-appearance=error][data-temporary]{border-color:#a70707}${transformTag("pn-toast")} .pn-toast[data-temporary]{border-style:solid;border-width:0.0625em;box-shadow:0 0.125em 0.25em rgba(0, 0, 0, 0.2)}`;

const PnToast = class extends Mixin(animateHeightFactory) {
    constructor(hostRef) {
        super();
        registerInstance(this, hostRef);
        this.close = createEvent(this, "close");
        this.hidden = createEvent(this, "hidden");
    }
    toast;
    button;
    get hostElement() { return getElement(this); }
    hasSlottedContent = false;
    /**
     * Set a title for the toast. Requires the `text` prop in order to work.
     * @description Can be used together with slotted content.
     */
    heading = '';
    /**
     * Set a paragraph of text for the toast.
     * @description Can be used together with slotted content.
     */
    text = '';
    /** Give the toast a HTML ID. */
    toastId;
    /**
     * Default color is blue, you also have the option of success (green), warning (orange) and error (red).
     * @category Visual
     */
    appearance;
    /**
     * This will apply a shadow and border to the toast.
     * @category Visual
     */
    temporary = false;
    /**
     * Set an SVG icon.
     * @category Visual
     */
    icon;
    /**
     * Set an SVG illustration.
     * @category Visual
     */
    illustration;
    /**
     * Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own.
     * @see {@link closable}
     * @category Features
     */
    hide = false;
    /**
     * Show close button.
     * @category Features
     */
    closable = false;
    /**
     * Manually set the language, only needed if the `closable` prop is enabled.
     * @see {@link closable}
     * @category Features
     */
    language = null;
    handleHide() {
        this.hostElement.style.overflow = 'hidden';
        requestAnimationFrame(() => this.toggleToastVisibility());
    }
    /** Event fired when the close button is pressed. */
    close;
    /**
     * This event is fired when the toast is fully hidden after the animation is finished.
     * Triggers from the close button or if the prop `hide` is set to true.
     * @since v7.6.0
     **/
    hidden;
    async componentWillLoad() {
        if (this.hide) {
            this.hostElement.style.height = '0';
            this.hostElement.style.overflow = 'hidden';
        }
        // Any text content at this stage means there is slotted content present.
        this.hasSlottedContent = !!this.hostElement.textContent;
        if (this.language === null)
            await awaitTopbar(this.hostElement);
    }
    componentDidLoad() {
        if (!!this.heading && !this.text && !this.hasSlottedContent)
            console.warn('The %s prop is only available if you use the %s prop or slotted content.', 'heading', 'text');
    }
    toggleToastVisibility() {
        if (this.hide)
            this.closeDropdown(this.hostElement, this.toast.clientHeight);
        else
            this.openDropdown(this.hostElement, this.toast.clientHeight);
    }
    handleClick(event) {
        this.hide = true;
        this.close.emit(this.hide);
        ripple(event, this.toast);
    }
    getIcon() {
        if (this.illustration)
            return '';
        if (this.icon)
            return this.icon;
        if (this.appearance === 'success')
            return check_circle;
        if (this.appearance === 'warning')
            return alert_exclamation_triangle;
        if (this.appearance === 'error')
            return alert_exclamation_circle;
        return alert_info_circle;
    }
    getRole() {
        return this.appearance === 'error' ? 'alert' : 'status';
    }
    showIcon() {
        return !this.illustration;
    }
    showIllustration() {
        return !this.showIcon();
    }
    showTitle() {
        return (this.hasSlottedContent || !!this.text) && !!this.heading;
    }
    translate(prop) {
        return translations?.[prop]?.[this.language || en] || prop;
    }
    hideToast() {
        return this.hide && !this.isMoving();
    }
    render() {
        return (h(Host, { key: '5c3fee615535723fb1f866ad2e5bc955289abe6e' }, h("div", { key: '4de5c242cce6bd2e77c355030c53e1161495f2aa', id: this.toastId, class: "pn-toast", role: this.getRole(), "data-appearance": this.appearance, "data-temporary": this.temporary, "data-hide": this.hideToast(), ref: el => (this.toast = el) }, this.showIcon() && h("pn-icon", { key: '69348635c02e8108503dbf588e65d522405fd08f', class: "pn-toast-icon", icon: this.getIcon() }), h("div", { key: 'a4a2bbd367ff30405a305e4c56da05575e2765bd', class: "pn-toast-content" }, this.showTitle() && h("h4", { key: '0e847dd42ed4d0e1c518b69519f27f23d491e11c', class: "pn-toast-heading" }, this.heading), this.text && h("p", { key: 'c423eb0872592844f4d583839b438442f65c1ab9', class: "pn-toast-text" }, this.text), h("slot", { key: '4e743ba3362107a4b5f585e12b2ad2879ffef5bf' })), this.showIllustration() && h("pn-illustration", { key: '1330548a89218ee19a73ff83f94df180a7b2cc98', illustration: this.illustration, width: "5.5em", height: "5.5em" }), this.closable && (h("button", { key: '321c57a9103fa0b4abedd2429420f94faa9fd5fc', class: "pn-toast-button", type: "button", "aria-label": this.translate('HIDE'), onClick: (event) => this.handleClick(event), ref: el => (this.button = el) }, h("pn-icon", { key: '3d68d08f2cca035840acd466accbe0d66da65153', icon: close }))))));
    }
    static get watchers() { return {
        "hide": [{
                "handleHide": 0
            }]
    }; }
};
PnToast.style = pnToastCss();

export { PnToast as pn_toast };
