UNPKG

bro-toastify

Version:

A framework-agnostic toast notification library

4 lines (3 loc) 18.4 kB
'use client'; "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("react-dom");const o={default:{type:"fade",duration:300,easing:"ease"},success:{type:"fade",duration:300,easing:"ease"},error:{type:"fade",duration:300,easing:"ease"},info:{type:"fade",duration:300,easing:"ease"},warning:{type:"fade",duration:500,easing:"ease"},loading:{type:"fade",duration:300,easing:"ease"},show:{type:"fade",duration:300,easing:"ease"},promises:{type:"fade",duration:300,easing:"ease"},fade:{type:"fade",duration:300,easing:"ease"},"top-slide":{type:"top-slide",duration:300,easing:"ease"},"right-slide":{type:"right-slide",duration:300,easing:"ease"},"bottom-slide":{type:"bottom-slide",duration:300,easing:"ease"},"left-slide":{type:"left-slide",duration:300,easing:"ease"},zoom:{type:"zoom",duration:300,easing:"ease"},flip:{type:"flip",duration:300,easing:"ease"},bounce:{type:"bounce",duration:300,easing:"ease"},none:{type:"none",duration:0,easing:"ease"}};function i(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o.default,n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];const{type:i}=t;if("none"===i)return;const r={fade:"animate-fade","top-slide":n?"animate-topSlide":"animate-topSlideReverse","right-slide":n?"animate-rightSlide":"animate-rightSlideReverse","bottom-slide":n?"animate-bottomSlide":"animate-bottomSlideReverse","left-slide":n?"animate-leftSlide":"animate-leftSlideReverse",zoom:"animate-zoom",flip:"animate-flip",bounce:"animate-bounce",none:""},s=document.createElement("style");s.textContent="\n .animate-topSlideReverse {\n animation: topSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes topSlideReverse {\n from { transform: translateY(0); opacity: 1; }\n to { transform: translateY(-100%); opacity: 0; }\n }\n .animate-rightSlideReverse {\n animation: rightSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes rightSlideReverse {\n from { transform: translateX(0); opacity: 1; }\n to { transform: translateX(100%); opacity: 0; }\n }\n .animate-bottomSlideReverse {\n animation: bottomSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes bottomSlideReverse {\n from { transform: translateY(0); opacity: 1; }\n to { transform: translateY(100%); opacity: 0; }\n }\n .animate-leftSlideReverse {\n animation: leftSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes leftSlideReverse {\n from { transform: translateX(0); opacity: 1; }\n to { transform: translateX(-100%); opacity: 0; }\n }\n ",document.head.appendChild(s);const a=r[i];a&&(e.classList.add(a),e.addEventListener("animationend",(()=>{e.classList.remove(a)}),{once:!0}))}let r="fade";function s(e){r=e}const a={type:"default",duration:3e3,position:"top-right",dismissible:!0,pauseOnHover:!0,customIcon:void 0,customClass:void 0},d=new Map,l=new Map,c=()=>Date.now().toString(36)+Math.random().toString(36).substring(2,5);function m(e){if(!e.message)return void console.error("BroToastify: message is required");const t=e.type||"default",n=e.containerOptions||{},i=n.animation?{...o[n.animation]}:o[r],s={...a,...e,duration:"loading"===e.type?0:e.duration??a.duration,animation:{...o[t],...i,...e.animation}},l=e.id||c(),m={...s,id:l,createdAt:Date.now()};return d.set(l,m),b("create",m),s.duration&&s.duration>0&&"undefined"!=typeof window&&setTimeout((()=>{f(l)}),s.duration),m}function f(e){let t,n;"string"==typeof e?(t=e,n=Array.from(d.values()).find((e=>e.id===t))):(t=e.id,n=e),n&&(d.delete(t),b("dismiss",n),n.onClose&&n.onClose())}function u(){Array.from(d.values()).forEach((e=>{f(e.id)}))}function p(e,t){return"undefined"==typeof window?{off:()=>{}}:(l.has(e)||l.set(e,[]),l.get(e).push(t),{off:()=>{const n=l.get(e);if(n){const e=n.indexOf(t);-1!==e&&n.splice(e,1)}}})}function b(e,t){if("undefined"!=typeof window){const n=l.get(e);n&&n.forEach((e=>e(t)))}}const g=new Map;function y(e){if("undefined"==typeof window)return null;if(g.has(e)){const t=g.get(e);return document.body.contains(t)||document.body.appendChild(t),t}console.debug("Creating container for position:",e);const t=document.createElement("div");return t.className=`bro-toastify-container ${function(e){return{"top-right":"top-4 right-4 items-end","top-left":"top-4 left-4 items-start","top-center":"top-4 left-1/2 -translate-x-1/2 items-center","bottom-right":"bottom-4 right-4 items-end","bottom-left":"bottom-4 left-4 items-start","bottom-center":"bottom-4 left-1/2 -translate-x-1/2 items-center"}[e||"top-right"]}(e)}`,t.setAttribute("role","region"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","true"),document.body.appendChild(t),g.set(e,t),t}const h={show:(e,t)=>m({message:e,type:"show",...t}),default:(e,t)=>m({message:e,type:"default",...t}),success:(e,t)=>m({message:e,type:"success",...t}),error:(e,t)=>m({message:e,type:"error",...t}),info:(e,t)=>m({message:e,type:"info",...t}),warning:(e,t)=>m({message:e,type:"warning",...t}),loading:(e,t)=>{const n=c();return m({id:n,message:e,type:"loading",...t}),{id:n}},promises:(e,t,n)=>{const o=c();return m({id:o,message:t.loading,type:"loading",...n}),e.then((e=>(f(o),m({message:t.success,type:"success",...n}),e))).catch((e=>{throw f(o),m({message:t.error,type:"error",...n}),e})),{id:o}},isToastActive:e=>!!Array.from(d.values()).find((t=>t.id===e)),dismiss:e=>f(e),dismissible:e=>f(e),clearAll:u},w=r=>{let{position:a="top-right",newestOnTop:d=!0,dismissible:l=!1,animation:c="fade"}=r;const[m,u]=t.useState([]),[b,g]=t.useState(!1),y=t.useRef(new Map),h=t.useRef(new Map);t.useEffect((()=>{g(!0),s(c);const e=p("create",(e=>{const t={...e,animation:e.animation||o[c]};u((e=>d?[t,...e]:[...e,t]))})),t=p("dismiss",(e=>{const t=y.current.get(e.id);t?(i(t,e.animation||o[c],!1),t.addEventListener("animationend",(()=>{u((t=>t.filter((t=>t.id!==e.id)))),y.current.delete(e.id),h.current.delete(e.id)}),{once:!0})):(u((t=>t.filter((t=>t.id!==e.id)))),h.current.delete(e.id))}));return()=>{e.off(),t.off()}}),[d,c]),t.useEffect((()=>{const e=m.map((e=>{if(e.duration&&e.duration>0&&"loading"!==e.type){const t=setTimeout((()=>{f(e.id)}),e.duration);return h.current.set(e.id,t),t}return null}));return()=>{e.forEach((e=>e&&clearTimeout(e)))}}),[m]),t.useEffect((()=>{m.forEach((e=>{const t=y.current.get(e.id);t&&!t.dataset.animated&&(i(t,e.animation||o[c],!0),t.dataset.animated="true")}))}),[m,c]);if(!b)return null;const w={default:"bg-white/80 backdrop-blur-md border border-gray-200 text-gray-900",success:"bg-green-500/90 backdrop-blur-md border border-green-600 text-white",error:"bg-red-500/90 backdrop-blur-md border border-red-600 text-white",info:"bg-blue-500/90 backdrop-blur-md border border-blue-600 text-white",warning:"bg-yellow-500/90 backdrop-blur-md border border-yellow-600 text-white",loading:"bg-white/80 backdrop-blur-md border border-gray-200 text-gray-900",promises:"bg-white/80 backdrop-blur-md border border-gray-200 text-gray-900",show:"bg-white/80 backdrop-blur-md border border-gray-200 text-gray-900",dismiss:"bg-white/80 backdrop-blur-md border border-gray-200 text-gray-900"};return n.createPortal(e.jsx("div",{className:`bro-toastify-container ${{"top-right":"top-4 right-4 items-end","top-left":"top-4 left-4 items-start","bottom-right":"bottom-4 right-4 items-end","bottom-left":"bottom-4 left-4 items-start","top-center":"top-4 left-1/2 -translate-x-1/2 items-center","bottom-center":"bottom-4 left-1/2 -translate-x-1/2 items-center"}[a]}`,children:m.map((t=>e.jsxs("div",{id:`toast-${t.id}`,className:`relative min-w-[300px] max-w-[500px] p-4 rounded-xl shadow-md flex flex-col opacity-100 transition-all duration-300 hover:scale-105 hover:shadow-lg ${w[t.type??"default"]} ${t.customClass||""}`,ref:e=>{e?y.current.set(t.id,e):y.current.delete(t.id)},onMouseEnter:()=>(e=>{const t=h.current.get(e);t&&(clearTimeout(t),h.current.set(e,null))})(t.id),onMouseLeave:()=>(e=>{const t=m.find((t=>t.id===e));if(t&&t.duration&&t.duration>0&&"loading"!==t.type){const n=setTimeout((()=>{f(e)}),t.duration);h.current.set(e,n)}})(t.id),children:[t.title&&e.jsx("div",{className:"font-semibold text-base mb-1.5 tracking-tight",children:t.title}),"loading"===t.type?e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"border-4 border-gray-200 border-t-blue-500 rounded-full w-5 h-5 animate-spin"}),e.jsx("div",{className:"text-sm text-gray-900 animate-[fade_0.3s_ease-in-out]",children:t.message})]}):e.jsx("div",{className:"text-sm tracking-tight",children:t.message}),l&&"loading"!==t.type&&"promises"!==t.type&&e.jsx("button",{className:"absolute top-2 right-2 w-6 h-6 flex items-center justify-center rounded-full bg-gray-200/50 text-gray-600 text-sm font-semibold hover:bg-gray-300/70 hover:text-gray-900 transition-all duration-200","aria-label":"Close",onClick:()=>f(t.id),children:"×"})]},t.id)))}),document.body)};w.displayName="Toaster";var x=Object.freeze({__proto__:null,Toaster:w,broToastify:()=>({show:(e,t)=>h.show(e,t),success:(e,t)=>h.success(e,t),error:(e,t)=>h.error(e,t),info:(e,t)=>h.info(e,t),warning:(e,t)=>h.warning(e,t),loading:(e,t)=>h.loading(e,t),promises:(e,t,n)=>h.promises(e,t,n),isToastActive:e=>h.isToastActive(e),dismiss:e=>h.dismiss(e),clearAll:()=>h.clearAll()})});let v=!1;function T(){if("undefined"==typeof window||v)return;const e="broToastify-styles";if(document.getElementById(e))v=!0;else try{const t=document.createElement("style");t.id=e,t.innerHTML="\n .broToastify-container {\n position: fixed;\n z-index: 9999;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n max-width: 100%;\n max-height: 100vh;\n overflow-y: auto;\n padding: 1rem;\n }\n \n .broToastify-notification {\n position: relative;\n min-width: 300px;\n max-width: 500px;\n padding: 1rem;\n border-radius: 0.375rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n opacity: 1 !important;\n visibility: visible !important;\n }\n\n .broToastify-default {\n background-color: rgb(240, 241, 240);\n color: #333;\n }\n \n .broToastify-success {\n background-color: #10B981;\n color: white;\n }\n \n .broToastify-error {\n background-color: #EF4444;\n color: white;\n }\n \n .broToastify-info {\n background-color: #3B82F6;\n color: white;\n }\n \n .broToastify-warning {\n background-color: #F59E0B;\n color: white;\n }\n\n .broToastify-loading {\n background-color: #F3F4F6;\n color: #333;\n }\n\n .broToastify-loader-container {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n } \n\n .broToastify-loader {\n border: 4px solid #f3f3f3;\n border-top: 4px solid #3498db;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n animation: spin 1s linear infinite;\n }\n\n .broToastify-loader-message {\n font-size: 0.875rem;\n color: #333;\n animation: fadeIn 0.3s ease-in-out;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n @keyframes fadeIn {\n 0% { opacity: 0; transform: translateY(-10px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n \n .broToastify-title {\n font-weight: bold;\n margin-bottom: 0.25rem;\n font-size: 1rem;\n }\n \n .broToastify-message {\n font-size: 0.875rem;\n }\n \n .broToastify-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n background: transparent;\n border: none;\n color: currentColor;\n font-size: 1.25rem;\n cursor: pointer;\n opacity: 0.7;\n transition: opacity 0.2s;\n }\n \n .broToastify-close:hover {\n opacity: 1;\n }\n \n .broToastify-top-right {\n top: 1rem;\n right: 1rem;\n align-items: flex-end;\n }\n \n .broToastify-top-left {\n top: 1rem;\n left: 1rem;\n align-items: flex-start;\n }\n \n .broToastify-bottom-right {\n bottom: 1rem;\n right: 1rem;\n align-items: flex-end;\n }\n \n .broToastify-bottom-left {\n bottom: 1rem;\n left: 1rem;\n align-items: flex-start;\n }\n \n .broToastify-top-center {\n top: 1rem;\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n }\n \n .broToastify-bottom-center {\n bottom: 1rem;\n left: 50%;\n transform: translateX(-50%);\n align-items: center;\n }\n \n undefined\n undefined\n undefined\n undefined\n undefined\n undefined\n undefined\n undefined\n \n @media (max-width: 576px) {\n .broToastify-container {\n width: 100%;\n padding: 0 1rem;\n }\n \n .broToastify-notification {\n min-width: 100%;\n max-width: 100%;\n }\n \n .broToastify-top-center,\n .broToastify-top-right,\n .broToastify-top-left {\n top: 0;\n right: 0;\n left: 0;\n transform: none;\n }\n \n .broToastify-bottom-center,\n .broToastify-bottom-right,\n .broToastify-bottom-left {\n bottom: 0;\n right: 0;\n left: 0;\n transform: none;\n }\n }\n ",document.head.appendChild(t),v=!0}catch(e){console.error("Failed to inject bro-toastify styles:",e)}}const C=h;var k=Object.freeze({__proto__:null,ToastService:class{constructor(){"undefined"!=typeof window&&T()}show(e,t){return h.show(e,t)}success(e,t){return h.success(e,t)}error(e,t){return h.error(e,t)}info(e,t){return h.info(e,t)}warning(e,t){return h.warning(e,t)}dismiss(e){h.dismissible(e)}clearAll(){h.clearAll()}},ToastContainerComponent:class{position="top-right";newestOnTop=!0;toasts=[];createUnsubscribe=null;dismissUnsubscribe=null;ngOnInit(){const e=p("create",(e=>{e.position===this.position&&(this.newestOnTop?this.toasts=[e,...this.toasts]:this.toasts=[...this.toasts,e])}));this.createUnsubscribe=e.off;const t=p("dismiss",(e=>{this.toasts=this.toasts.filter((t=>t.id!==e.id))}));this.dismissUnsubscribe=t.off}ngOnDestroy(){this.createUnsubscribe&&this.createUnsubscribe(),this.dismissUnsubscribe&&this.dismissUnsubscribe()}handleDismiss(e){h.dismissible(e)}},angularToast:C});const E=new Map;function S(e){if("undefined"==typeof window)return null;if(E.has(e)){const t=E.get(e);return document.body.contains(t)||document.body.appendChild(t),t}return function(e){if("undefined"==typeof window)return null;if(E.has(e)){const t=E.get(e);return document.body.contains(t)||document.body.appendChild(t),t}console.debug("Creating container for position:",e);const t=document.createElement("div");switch(t.className=`broToastify-container ${function(e){return{"top-right":"top-4 right-4 items-end","top-left":"top-4 left-4 items-start","top-center":"top-4 left-1/2 -translate-x-1/2 items-center","bottom-right":"bottom-4 right-4 items-end","bottom-left":"bottom-4 left-4 items-start","bottom-center":"bottom-4 left-1/2 -translate-x-1/2 items-center"}[e||"top-right"]}(e)}`,t.setAttribute("role","region"),t.setAttribute("aria-live","polite"),t.setAttribute("aria-atomic","true"),e){case"top-right":t.style.top="1rem",t.style.right="1rem";break;case"top-left":t.style.top="1rem",t.style.left="1rem";break;case"top-center":t.style.top="1rem",t.style.left="50%",t.style.transform="translateX(-50%)";break;case"bottom-right":t.style.bottom="1rem",t.style.right="1rem";break;case"bottom-left":t.style.bottom="1rem",t.style.left="1rem";break;case"bottom-center":t.style.bottom="1rem",t.style.left="50%",t.style.transform="translateX(-50%)";break;default:console.error(`Invalid position: ${e}`)}return document.body.appendChild(t),E.set(e,t),t}(e)}const A=h;var R=Object.freeze({__proto__:null,injectStyles:T,init:function(e){"undefined"!=typeof window&&T(),e&&Object.assign(h,{defaultOptions:e});const t=p("create",(t=>{const n=S(t.position),o=function(e){const{id:t,type:n,message:o,title:r,dismissible:s,customClass:a,animation:d}=e,l=document.createElement("div");if(l.id=`broToastify-${t}`,l.className=`broToastify-notification broToastify-${n} ${a||""}`,l.setAttribute("role","alert"),i(l,d,!0),r){const e=document.createElement("div");e.className="broToastify-title",e.textContent=r,l.appendChild(e)}if("loading"===n){const e=document.createElement("div");e.className="broToastify-loader-container";const t=document.createElement("div");t.className="broToastify-loader",e.appendChild(t);const n=document.createElement("div");n.className="broToastify-loader-message",n.textContent=o,e.appendChild(n),l.appendChild(e)}else{const e=document.createElement("div");e.className="broToastify-message",e.textContent=o,l.appendChild(e)}if(s){const e=document.createElement("button");e.className="broToastify-close",e.innerHTML="×",e.setAttribute("aria-label","Close"),e.onclick=()=>{const e=new CustomEvent("broToastify:dismiss",{detail:{id:t}});document.dispatchEvent(e)},l.appendChild(e)}return e.onClick&&(l.addEventListener("click",(t=>{t.target.closest(".broToastify-close")||e.onClick()})),l.style.cursor="pointer"),l}(t);e?.newestOnTop?n?.prepend(o):n?.appendChild(o);const r=e=>{e.detail.id===t.id&&(t.dismiss?.(t.id),o.remove())};document.addEventListener("toast:dismiss",r),t.duration&&t.duration>0&&setTimeout((()=>{t.dismiss?.(t.id),o.remove()}),t.duration);o.addEventListener("remove",(()=>{document.removeEventListener("toast:dismiss",r)}),{once:!0})}));return()=>{t.off()}},vanilla:A});const N=x,j=k,_=R;exports.Angular=j,exports.React=N,exports.Toaster=w,exports.Vanilla=_,exports.clearBroToastify=u,exports.createBroToastify=m,exports.createContainer=y,exports.default=h,exports.dismissBroToastify=f,exports.getContainer=function(e){if("undefined"==typeof window)return null;if(g.has(e)){const t=g.get(e);return document.body.contains(t)||document.body.appendChild(t),t}return y(e)},exports.on=p,exports.removeAllContainers=function(){"undefined"!=typeof window&&(console.debug("Removing all containers"),g.forEach((e=>{document.body.contains(e)&&e.remove()})),g.clear())},exports.setToasterAnimation=s; //# sourceMappingURL=index.cjs.js.map