/*!
 * Built with Stencil
 * By PostNord.
 */
import { Host, h, Mixin } from "@stencil/core";
import { animateHeightFactory } from "../../../globals/mixins/index";
import { awaitTopbar, en, ripple } from "../../../index";
import { alert_info_circle, check_circle, alert_exclamation_triangle, alert_exclamation_circle, close, } from "pn-design-assets/pn-assets/icons.js";
import { translations } from "./translation";
/**
 * This component is able to fill many roles of a classic toast.
 * It has 4 different colors, a temporary state, hide button, icon and illustration support.
 *
 * The `pn-toast` will expand to its parent containers full width.
 * Either limit the parent width or set a CSS rule to your specific width if needed.
 */
export class PnToast extends Mixin(animateHeightFactory) {
    constructor() {
        super();
    }
    toast;
    button;
    hostElement;
    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 is() { return "pn-toast"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-toast.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-toast.css"]
        };
    }
    static get properties() {
        return {
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "description",
                            "text": "Can be used together with slotted content."
                        }],
                    "text": "Set a title for the toast. Requires the `text` prop in order to work."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "heading",
                "defaultValue": "''"
            },
            "text": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "description",
                            "text": "Can be used together with slotted content."
                        }],
                    "text": "Set a paragraph of text for the toast."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "text",
                "defaultValue": "''"
            },
            "toastId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Give the toast a HTML ID."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "toast-id"
            },
            "appearance": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'' | 'success' | 'warning' | 'error'",
                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Visual"
                        }],
                    "text": "Default color is blue, you also have the option of success (green), warning (orange) and error (red)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "appearance"
            },
            "temporary": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Visual"
                        }],
                    "text": "This will apply a shadow and border to the toast."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "temporary",
                "defaultValue": "false"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Visual"
                        }],
                    "text": "Set an SVG icon."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "illustration": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Visual"
                        }],
                    "text": "Set an SVG illustration."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "illustration"
            },
            "hide": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "see",
                            "text": "{@link closable }"
                        }, {
                            "name": "category",
                            "text": "Features"
                        }],
                    "text": "Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "hide",
                "defaultValue": "false"
            },
            "closable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Features"
                        }],
                    "text": "Show close button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "closable",
                "defaultValue": "false"
            },
            "language": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "PnLanguages",
                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
                    "references": {
                        "PnLanguages": {
                            "location": "import",
                            "path": "@/index",
                            "id": "src/index.ts::PnLanguages",
                            "referenceLocation": "PnLanguages"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "see",
                            "text": "{@link closable }"
                        }, {
                            "name": "category",
                            "text": "Features"
                        }],
                    "text": "Manually set the language, only needed if the `closable` prop is enabled."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language",
                "defaultValue": "null"
            }
        };
    }
    static get states() {
        return {
            "hasSlottedContent": {}
        };
    }
    static get events() {
        return [{
                "method": "close",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the close button is pressed."
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }, {
                "method": "hidden",
                "name": "hidden",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.6.0"
                        }],
                    "text": "This event is fired when the toast is fully hidden after the animation is finished.\nTriggers from the close button or if the prop `hide` is set to true."
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "hide",
                "methodName": "handleHide"
            }];
    }
}
