radh-ui/dist/esm/radh-toast.entry.js

Stencil Component Starter

import { r as registerInstance, h, g as getElement } from './index-a9700b09.js';

const radhToastCss = "#toast{visibility:hidden;max-width:50px;height:50px;margin:auto;background-color:#333;color:#fff;text-align:center;border-radius:2px;position:fixed;z-index:1;left:0;right:0;bottom:30px;font-size:17px;white-space:nowrap}#toast #img{width:50px;height:50px;float:left;padding-top:16px;padding-bottom:16px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#111;color:#fff}#toast #desc{color:#fff;padding:16px;overflow:hidden;white-space:nowrap}#toast.show{visibility:visible;-webkit-animation:fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;animation:fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s}@-webkit-keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes fadein{from{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@-webkit-keyframes expand{from{min-width:50px}to{min-width:350px}}@keyframes expand{from{min-width:50px}to{min-width:350px}}@-webkit-keyframes stay{from{min-width:350px}to{min-width:350px}}@keyframes stay{from{min-width:350px}to{min-width:350px}}@-webkit-keyframes shrink{from{min-width:350px}to{min-width:50px}}@keyframes shrink{from{min-width:350px}to{min-width:50px}}@-webkit-keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:60px;opacity:0}}@keyframes fadeout{from{bottom:30px;opacity:1}to{bottom:60px;opacity:0}}";

class RadhToast {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    async launchToast(desc) {
        this.desc = desc;
        var toast = this.element.querySelector("#toast");
        toast.className = "show";
        setTimeout(function () {
            toast.className = toast.className.replace("show", "");
        }, 5000);
    }
    render() {
        return (h("div", { id: "toast" }, h("div", { id: "img" }, "Icon"), h("div", { id: "desc" }, this.desc)));
    }
    get element() { return getElement(this); }
}
RadhToast.style = radhToastCss;

export { RadhToast as radh_toast };