UNPKG

js-toaster

Version:

Agnostic and responsive notifications javascript module

1,453 lines (1,452 loc) 43.4 kB
var __defProp = Object.defineProperty; var __getOwnPropSymbols = Object.getOwnPropertySymbols; var __hasOwnProp = Object.prototype.hasOwnProperty; var __propIsEnum = Object.prototype.propertyIsEnumerable; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __spreadValues = (a, b) => { for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]); if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) { if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]); } return a; }; var __publicField = (obj, key, value) => { __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); return value; }; function noop() { } const identity = (x) => x; function run(fn) { return fn(); } function blank_object() { return /* @__PURE__ */ Object.create(null); } function run_all(fns) { fns.forEach(run); } function is_function(thing) { return typeof thing === "function"; } function safe_not_equal(a, b) { return a != a ? b == b : a !== b || (a && typeof a === "object" || typeof a === "function"); } function is_empty(obj) { return Object.keys(obj).length === 0; } function subscribe(store, ...callbacks) { if (store == null) { return noop; } const unsub = store.subscribe(...callbacks); return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub; } function get_store_value(store) { let value; subscribe(store, (_) => value = _)(); return value; } function component_subscribe(component, store, callback) { component.$$.on_destroy.push(subscribe(store, callback)); } const is_client = typeof window !== "undefined"; let now = is_client ? () => window.performance.now() : () => Date.now(); let raf = is_client ? (cb) => requestAnimationFrame(cb) : noop; const tasks = /* @__PURE__ */ new Set(); function run_tasks(now2) { tasks.forEach((task) => { if (!task.c(now2)) { tasks.delete(task); task.f(); } }); if (tasks.size !== 0) raf(run_tasks); } function loop(callback) { let task; if (tasks.size === 0) raf(run_tasks); return { promise: new Promise((fulfill) => { tasks.add(task = { c: callback, f: fulfill }); }), abort() { tasks.delete(task); } }; } function append(target, node) { target.appendChild(node); } function get_root_for_style(node) { if (!node) return document; const root = node.getRootNode ? node.getRootNode() : node.ownerDocument; if (root && root.host) { return root; } return node.ownerDocument; } function append_empty_stylesheet(node) { const style_element = element("style"); append_stylesheet(get_root_for_style(node), style_element); return style_element.sheet; } function append_stylesheet(node, style) { append(node.head || node, style); } function insert(target, node, anchor) { target.insertBefore(node, anchor || null); } function detach(node) { node.parentNode.removeChild(node); } function element(name) { return document.createElement(name); } function text(data) { return document.createTextNode(data); } function space() { return text(" "); } function empty() { return text(""); } function listen(node, event, handler, options) { node.addEventListener(event, handler, options); return () => node.removeEventListener(event, handler, options); } function stop_propagation(fn) { return function(event) { event.stopPropagation(); return fn.call(this, event); }; } function attr(node, attribute, value) { if (value == null) node.removeAttribute(attribute); else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value); } function children(element2) { return Array.from(element2.childNodes); } function set_data(text2, data) { data = "" + data; if (text2.wholeText !== data) text2.data = data; } function set_style(node, key, value, important) { if (value === null) { node.style.removeProperty(key); } else { node.style.setProperty(key, value, important ? "important" : ""); } } function toggle_class(element2, name, toggle) { element2.classList[toggle ? "add" : "remove"](name); } function custom_event(type, detail, bubbles = false) { const e = document.createEvent("CustomEvent"); e.initCustomEvent(type, bubbles, false, detail); return e; } const managed_styles = /* @__PURE__ */ new Map(); let active = 0; function hash(str) { let hash2 = 5381; let i = str.length; while (i--) hash2 = (hash2 << 5) - hash2 ^ str.charCodeAt(i); return hash2 >>> 0; } function create_style_information(doc, node) { const info = { stylesheet: append_empty_stylesheet(node), rules: {} }; managed_styles.set(doc, info); return info; } function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) { const step = 16.666 / duration; let keyframes = "{\n"; for (let p = 0; p <= 1; p += step) { const t = a + (b - a) * ease(p); keyframes += p * 100 + `%{${fn(t, 1 - t)}} `; } const rule = keyframes + `100% {${fn(b, 1 - b)}} }`; const name = `__svelte_${hash(rule)}_${uid}`; const doc = get_root_for_style(node); const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node); if (!rules[name]) { rules[name] = true; stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length); } const animation = node.style.animation || ""; node.style.animation = `${animation ? `${animation}, ` : ""}${name} ${duration}ms linear ${delay}ms 1 both`; active += 1; return name; } function delete_rule(node, name) { const previous = (node.style.animation || "").split(", "); const next = previous.filter(name ? (anim) => anim.indexOf(name) < 0 : (anim) => anim.indexOf("__svelte") === -1); const deleted = previous.length - next.length; if (deleted) { node.style.animation = next.join(", "); active -= deleted; if (!active) clear_rules(); } } function clear_rules() { raf(() => { if (active) return; managed_styles.forEach((info) => { const { stylesheet } = info; let i = stylesheet.cssRules.length; while (i--) stylesheet.deleteRule(i); info.rules = {}; }); managed_styles.clear(); }); } let current_component; function set_current_component(component) { current_component = component; } function get_current_component() { if (!current_component) throw new Error("Function called outside component initialization"); return current_component; } function onDestroy(fn) { get_current_component().$$.on_destroy.push(fn); } function createEventDispatcher() { const component = get_current_component(); return (type, detail) => { const callbacks = component.$$.callbacks[type]; if (callbacks) { const event = custom_event(type, detail); callbacks.slice().forEach((fn) => { fn.call(component, event); }); } }; } function bubble(component, event) { const callbacks = component.$$.callbacks[event.type]; if (callbacks) { callbacks.slice().forEach((fn) => fn.call(this, event)); } } const dirty_components = []; const binding_callbacks = []; const render_callbacks = []; const flush_callbacks = []; const resolved_promise = Promise.resolve(); let update_scheduled = false; function schedule_update() { if (!update_scheduled) { update_scheduled = true; resolved_promise.then(flush); } } function add_render_callback(fn) { render_callbacks.push(fn); } const seen_callbacks = /* @__PURE__ */ new Set(); let flushidx = 0; function flush() { const saved_component = current_component; do { while (flushidx < dirty_components.length) { const component = dirty_components[flushidx]; flushidx++; set_current_component(component); update(component.$$); } set_current_component(null); dirty_components.length = 0; flushidx = 0; while (binding_callbacks.length) binding_callbacks.pop()(); for (let i = 0; i < render_callbacks.length; i += 1) { const callback = render_callbacks[i]; if (!seen_callbacks.has(callback)) { seen_callbacks.add(callback); callback(); } } render_callbacks.length = 0; } while (dirty_components.length); while (flush_callbacks.length) { flush_callbacks.pop()(); } update_scheduled = false; seen_callbacks.clear(); set_current_component(saved_component); } function update($$) { if ($$.fragment !== null) { $$.update(); run_all($$.before_update); const dirty = $$.dirty; $$.dirty = [-1]; $$.fragment && $$.fragment.p($$.ctx, dirty); $$.after_update.forEach(add_render_callback); } } let promise; function wait() { if (!promise) { promise = Promise.resolve(); promise.then(() => { promise = null; }); } return promise; } function dispatch(node, direction, kind) { node.dispatchEvent(custom_event(`${direction ? "intro" : "outro"}${kind}`)); } const outroing = /* @__PURE__ */ new Set(); let outros; function group_outros() { outros = { r: 0, c: [], p: outros }; } function check_outros() { if (!outros.r) { run_all(outros.c); } outros = outros.p; } function transition_in(block, local) { if (block && block.i) { outroing.delete(block); block.i(local); } } function transition_out(block, local, detach2, callback) { if (block && block.o) { if (outroing.has(block)) return; outroing.add(block); outros.c.push(() => { outroing.delete(block); if (callback) { if (detach2) block.d(1); callback(); } }); block.o(local); } } const null_transition = { duration: 0 }; function create_bidirectional_transition(node, fn, params, intro) { let config = fn(node, params); let t = intro ? 0 : 1; let running_program = null; let pending_program = null; let animation_name = null; function clear_animation() { if (animation_name) delete_rule(node, animation_name); } function init2(program, duration) { const d = program.b - t; duration *= Math.abs(d); return { a: t, b: program.b, d, duration, start: program.start, end: program.start + duration, group: program.group }; } function go(b) { const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition; const program = { start: now() + delay, b }; if (!b) { program.group = outros; outros.r += 1; } if (running_program || pending_program) { pending_program = program; } else { if (css) { clear_animation(); animation_name = create_rule(node, t, b, duration, delay, easing, css); } if (b) tick(0, 1); running_program = init2(program, duration); add_render_callback(() => dispatch(node, b, "start")); loop((now2) => { if (pending_program && now2 > pending_program.start) { running_program = init2(pending_program, duration); pending_program = null; dispatch(node, running_program.b, "start"); if (css) { clear_animation(); animation_name = create_rule(node, t, running_program.b, running_program.duration, 0, easing, config.css); } } if (running_program) { if (now2 >= running_program.end) { tick(t = running_program.b, 1 - t); dispatch(node, running_program.b, "end"); if (!pending_program) { if (running_program.b) { clear_animation(); } else { if (!--running_program.group.r) run_all(running_program.group.c); } } running_program = null; } else if (now2 >= running_program.start) { const p = now2 - running_program.start; t = running_program.a + running_program.d * easing(p / running_program.duration); tick(t, 1 - t); } } return !!(running_program || pending_program); }); } } return { run(b) { if (is_function(config)) { wait().then(() => { config = config(); go(b); }); } else { go(b); } }, end() { clear_animation(); running_program = pending_program = null; } }; } function outro_and_destroy_block(block, lookup) { transition_out(block, 1, 1, () => { lookup.delete(block.key); }); } function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block2, next, get_context) { let o = old_blocks.length; let n = list.length; let i = o; const old_indexes = {}; while (i--) old_indexes[old_blocks[i].key] = i; const new_blocks = []; const new_lookup = /* @__PURE__ */ new Map(); const deltas = /* @__PURE__ */ new Map(); i = n; while (i--) { const child_ctx = get_context(ctx, list, i); const key = get_key(child_ctx); let block = lookup.get(key); if (!block) { block = create_each_block2(key, child_ctx); block.c(); } else if (dynamic) { block.p(child_ctx, dirty); } new_lookup.set(key, new_blocks[i] = block); if (key in old_indexes) deltas.set(key, Math.abs(i - old_indexes[key])); } const will_move = /* @__PURE__ */ new Set(); const did_move = /* @__PURE__ */ new Set(); function insert2(block) { transition_in(block, 1); block.m(node, next); lookup.set(block.key, block); next = block.first; n--; } while (o && n) { const new_block = new_blocks[n - 1]; const old_block = old_blocks[o - 1]; const new_key = new_block.key; const old_key = old_block.key; if (new_block === old_block) { next = new_block.first; o--; n--; } else if (!new_lookup.has(old_key)) { destroy(old_block, lookup); o--; } else if (!lookup.has(new_key) || will_move.has(new_key)) { insert2(new_block); } else if (did_move.has(old_key)) { o--; } else if (deltas.get(new_key) > deltas.get(old_key)) { did_move.add(new_key); insert2(new_block); } else { will_move.add(old_key); o--; } } while (o--) { const old_block = old_blocks[o]; if (!new_lookup.has(old_block.key)) destroy(old_block, lookup); } while (n) insert2(new_blocks[n - 1]); return new_blocks; } function create_component(block) { block && block.c(); } function mount_component(component, target, anchor, customElement) { const { fragment, on_mount, on_destroy, after_update } = component.$$; fragment && fragment.m(target, anchor); if (!customElement) { add_render_callback(() => { const new_on_destroy = on_mount.map(run).filter(is_function); if (on_destroy) { on_destroy.push(...new_on_destroy); } else { run_all(new_on_destroy); } component.$$.on_mount = []; }); } after_update.forEach(add_render_callback); } function destroy_component(component, detaching) { const $$ = component.$$; if ($$.fragment !== null) { run_all($$.on_destroy); $$.fragment && $$.fragment.d(detaching); $$.on_destroy = $$.fragment = null; $$.ctx = []; } } function make_dirty(component, i) { if (component.$$.dirty[0] === -1) { dirty_components.push(component); schedule_update(); component.$$.dirty.fill(0); } component.$$.dirty[i / 31 | 0] |= 1 << i % 31; } function init(component, options, instance2, create_fragment2, not_equal, props, append_styles, dirty = [-1]) { const parent_component = current_component; set_current_component(component); const $$ = component.$$ = { fragment: null, ctx: null, props, update: noop, not_equal, bound: blank_object(), on_mount: [], on_destroy: [], on_disconnect: [], before_update: [], after_update: [], context: new Map(options.context || (parent_component ? parent_component.$$.context : [])), callbacks: blank_object(), dirty, skip_bound: false, root: options.target || parent_component.$$.root }; append_styles && append_styles($$.root); let ready = false; $$.ctx = instance2 ? instance2(component, options.props || {}, (i, ret, ...rest) => { const value = rest.length ? rest[0] : ret; if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) { if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value); if (ready) make_dirty(component, i); } return ret; }) : []; $$.update(); ready = true; run_all($$.before_update); $$.fragment = create_fragment2 ? create_fragment2($$.ctx) : false; if (options.target) { if (options.hydrate) { const nodes = children(options.target); $$.fragment && $$.fragment.l(nodes); nodes.forEach(detach); } else { $$.fragment && $$.fragment.c(); } if (options.intro) transition_in(component.$$.fragment); mount_component(component, options.target, options.anchor, options.customElement); flush(); } set_current_component(parent_component); } class SvelteComponent { $destroy() { destroy_component(this, 1); this.$destroy = noop; } $on(type, callback) { const callbacks = this.$$.callbacks[type] || (this.$$.callbacks[type] = []); callbacks.push(callback); return () => { const index = callbacks.indexOf(callback); if (index !== -1) callbacks.splice(index, 1); }; } $set($$props) { if (this.$$set && !is_empty($$props)) { this.$$.skip_bound = true; this.$$set($$props); this.$$.skip_bound = false; } } } var ToastPosition = /* @__PURE__ */ ((ToastPosition2) => { ToastPosition2["topLeft"] = "topLeft"; ToastPosition2["topRight"] = "topRight"; ToastPosition2["bottomRight"] = "bottomRight"; ToastPosition2["bottomLeft"] = "bottomLeft"; return ToastPosition2; })(ToastPosition || {}); var ToastMobilePosition = /* @__PURE__ */ ((ToastMobilePosition2) => { ToastMobilePosition2["top"] = "top"; ToastMobilePosition2["bottom"] = "bottom"; return ToastMobilePosition2; })(ToastMobilePosition || {}); var ToastType = /* @__PURE__ */ ((ToastType2) => { ToastType2["info"] = "info"; ToastType2["success"] = "success"; ToastType2["warning"] = "warning"; ToastType2["danger"] = "danger"; return ToastType2; })(ToastType || {}); const subscriber_queue = []; function readable(value, start) { return { subscribe: writable(value, start).subscribe }; } function writable(value, start = noop) { let stop; const subscribers = /* @__PURE__ */ new Set(); function set(new_value) { if (safe_not_equal(value, new_value)) { value = new_value; if (stop) { const run_queue = !subscriber_queue.length; for (const subscriber of subscribers) { subscriber[1](); subscriber_queue.push(subscriber, value); } if (run_queue) { for (let i = 0; i < subscriber_queue.length; i += 2) { subscriber_queue[i][0](subscriber_queue[i + 1]); } subscriber_queue.length = 0; } } } } function update2(fn) { set(fn(value)); } function subscribe2(run2, invalidate = noop) { const subscriber = [run2, invalidate]; subscribers.add(subscriber); if (subscribers.size === 1) { stop = start(set) || noop; } run2(value); return () => { subscribers.delete(subscriber); if (subscribers.size === 0) { stop(); stop = null; } }; } return { set, update: update2, subscribe: subscribe2 }; } function derived(stores, fn, initial_value) { const single = !Array.isArray(stores); const stores_array = single ? [stores] : stores; const auto = fn.length < 2; return readable(initial_value, (set) => { let inited = false; const values = []; let pending = 0; let cleanup = noop; const sync = () => { if (pending) { return; } cleanup(); const result = fn(single ? values[0] : values, set); if (auto) { set(result); } else { cleanup = is_function(result) ? result : noop; } }; const unsubscribers = stores_array.map((store, i) => subscribe(store, (value) => { values[i] = value; pending &= ~(1 << i); if (inited) { sync(); } }, () => { pending |= 1 << i; })); inited = true; sync(); return function stop() { run_all(unsubscribers); cleanup(); }; }); } let toasts = writable([]); let topLeftToasts = derived(toasts, ($toasts) => { return $toasts.filter((t) => t.position === ToastPosition.topLeft); }); let topRightToasts = derived(toasts, ($toasts) => { return $toasts.filter((t) => t.position === ToastPosition.topRight); }); let bottomLeftToasts = derived(toasts, ($toasts) => { return $toasts.filter((t) => t.position === ToastPosition.bottomLeft); }); let bottomRightToasts = derived(toasts, ($toasts) => { return $toasts.filter((t) => t.position === ToastPosition.bottomRight); }); class JSToasterService { constructor() { __publicField(this, "toastConf"); __publicField(this, "timeout", null); } set conf(toasterConf) { this.toastConf = { position: toasterConf.position || this.toastConf.position, type: toasterConf.type || this.toastConf.type, displayTime: toasterConf.displayTime >= 0 ? toasterConf.displayTime : this.toastConf.displayTime, dark: toasterConf.dark !== void 0 || toasterConf.dark !== null ? toasterConf.dark : this.toastConf.dark }; } toast(t) { t = __spreadValues(__spreadValues({}, this.toastConf), t); t.timestamp = new Date().getTime() + t.displayTime * 1e3; t.id = parseInt(`${Math.round(Math.random() * 1e3)}${t.timestamp}`); toasts.update((ts) => [...ts, t]); this.toastsUpdated(); return t.id; } closeToast(toast) { if (toast) { toasts.update((toasts2) => toasts2.filter((t) => t.id !== toast.id)); this.toastsUpdated(); } } toastsUpdated() { let toastsArr = get_store_value(toasts); if (toastsArr && toastsArr.length > 0) { if (this.timeout) { window.clearTimeout(this.timeout); this.timeout = null; } toastsArr = toastsArr.filter((t) => t.displayTime > 0).sort((t1, t2) => t1.timestamp - t2.timestamp); if (toastsArr.length > 0) { const toastToDelete = toastsArr[0]; let duration = toastToDelete.timestamp - new Date().getTime(); if (duration < 0) duration = 0; this.timeout = window.setTimeout(() => { toasts.update((toasts2) => { return toasts2.filter((t) => t.id !== toastToDelete.id); }); this.toastsUpdated(); }, duration); } } } } const jsToasterService = new JSToasterService(); function cubicOut(t) { const f = t - 1; return f * f * f + 1; } function fly(node, { delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0 } = {}) { const style = getComputedStyle(node); const target_opacity = +style.opacity; const transform = style.transform === "none" ? "" : style.transform; const od = target_opacity * (1 - opacity); return { delay, duration, easing, css: (t, u) => ` transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px); opacity: ${target_opacity - od * u}` }; } var Toast_svelte_svelte_type_style_lang = ""; function create_fragment$2(ctx) { let li; let div2; let div0; let t0_value = (ctx[0].title || "") + ""; let t0; let t1; let div1; let t2; let div3; let t3_value = ctx[0].message + ""; let t3; let li_transition; let current; let mounted; let dispose; return { c() { li = element("li"); div2 = element("div"); div0 = element("div"); t0 = text(t0_value); t1 = space(); div1 = element("div"); t2 = space(); div3 = element("div"); t3 = text(t3_value); attr(div0, "class", "title svelte-l021am"); attr(div1, "class", "close svelte-l021am"); attr(div2, "class", "header svelte-l021am"); attr(div3, "class", "message svelte-l021am"); attr(li, "class", "toast svelte-l021am"); toggle_class(li, "danger", ctx[0].type === ToastType.danger); toggle_class(li, "success", ctx[0].type === ToastType.success); toggle_class(li, "warning", ctx[0].type === ToastType.warning); toggle_class(li, "info", ctx[0].type === ToastType.info); toggle_class(li, "left", ctx[1] === ToastPosition.topLeft || ctx[1] === ToastPosition.bottomLeft); toggle_class(li, "right", ctx[1] === ToastPosition.topRight || ctx[1] === ToastPosition.bottomRight); toggle_class(li, "dark", ctx[0].dark); set_style(li, "cursor", ctx[0].link ? "pointer" : "default", false); }, m(target, anchor) { insert(target, li, anchor); append(li, div2); append(div2, div0); append(div0, t0); append(div2, t1); append(div2, div1); append(li, t2); append(li, div3); append(div3, t3); current = true; if (!mounted) { dispose = [ listen(div1, "click", stop_propagation(ctx[2]), true), listen(li, "click", ctx[3]) ]; mounted = true; } }, p(new_ctx, [dirty]) { ctx = new_ctx; if ((!current || dirty & 1) && t0_value !== (t0_value = (ctx[0].title || "") + "")) set_data(t0, t0_value); if ((!current || dirty & 1) && t3_value !== (t3_value = ctx[0].message + "")) set_data(t3, t3_value); if (dirty & 1) { toggle_class(li, "danger", ctx[0].type === ToastType.danger); } if (dirty & 1) { toggle_class(li, "success", ctx[0].type === ToastType.success); } if (dirty & 1) { toggle_class(li, "warning", ctx[0].type === ToastType.warning); } if (dirty & 1) { toggle_class(li, "info", ctx[0].type === ToastType.info); } if (dirty & 2) { toggle_class(li, "left", ctx[1] === ToastPosition.topLeft || ctx[1] === ToastPosition.bottomLeft); } if (dirty & 2) { toggle_class(li, "right", ctx[1] === ToastPosition.topRight || ctx[1] === ToastPosition.bottomRight); } if (dirty & 1) { toggle_class(li, "dark", ctx[0].dark); } if (dirty & 1) { set_style(li, "cursor", ctx[0].link ? "pointer" : "default", false); } }, i(local) { if (current) return; add_render_callback(() => { if (!li_transition) li_transition = create_bidirectional_transition(li, fly, { x: ctx[0].position === ToastPosition.topLeft || ctx[0].position === ToastPosition.bottomLeft ? -500 : 500, duration: 500 }, true); li_transition.run(1); }); current = true; }, o(local) { if (!li_transition) li_transition = create_bidirectional_transition(li, fly, { x: ctx[0].position === ToastPosition.topLeft || ctx[0].position === ToastPosition.bottomLeft ? -500 : 500, duration: 500 }, false); li_transition.run(0); current = false; }, d(detaching) { if (detaching) detach(li); if (detaching && li_transition) li_transition.end(); mounted = false; run_all(dispose); } }; } function instance$2($$self, $$props, $$invalidate) { const dispatch2 = createEventDispatcher(); let { toast } = $$props; let { position = ToastPosition.topRight } = $$props; onDestroy(() => { dispatch2("toast-closed", toast.id); }); function closeHandler() { if (toast) { jsToasterService.closeToast(toast); } } function clickHandler() { if (toast.link) { if (typeof toast.link === "string") { document.location.href = toast.link; } else { dispatch2("toast-clicked", toast.id); jsToasterService.closeToast(toast); } } } $$self.$$set = ($$props2) => { if ("toast" in $$props2) $$invalidate(0, toast = $$props2.toast); if ("position" in $$props2) $$invalidate(1, position = $$props2.position); }; return [toast, position, closeHandler, clickHandler]; } class Toast extends SvelteComponent { constructor(options) { super(); init(this, options, instance$2, create_fragment$2, safe_not_equal, { toast: 0, position: 1 }); } } var ToastList_svelte_svelte_type_style_lang = ""; function get_each_context(ctx, list, i) { const child_ctx = ctx.slice(); child_ctx[6] = list[i]; return child_ctx; } function create_each_block(key_1, ctx) { let first; let toastcomponent; let current; toastcomponent = new Toast({ props: { toast: ctx[6], position: ctx[1] } }); toastcomponent.$on("toast-clicked", ctx[4]); toastcomponent.$on("toast-closed", ctx[3]); toastcomponent.$on("toast-closed", ctx[5]); return { key: key_1, first: null, c() { first = empty(); create_component(toastcomponent.$$.fragment); this.first = first; }, m(target, anchor) { insert(target, first, anchor); mount_component(toastcomponent, target, anchor); current = true; }, p(new_ctx, dirty) { ctx = new_ctx; const toastcomponent_changes = {}; if (dirty & 1) toastcomponent_changes.toast = ctx[6]; if (dirty & 2) toastcomponent_changes.position = ctx[1]; toastcomponent.$set(toastcomponent_changes); }, i(local) { if (current) return; transition_in(toastcomponent.$$.fragment, local); current = true; }, o(local) { transition_out(toastcomponent.$$.fragment, local); current = false; }, d(detaching) { if (detaching) detach(first); destroy_component(toastcomponent, detaching); } }; } function create_fragment$1(ctx) { let ul; let each_blocks = []; let each_1_lookup = /* @__PURE__ */ new Map(); let current; let each_value = ctx[0]; const get_key = (ctx2) => ctx2[6].id; for (let i = 0; i < each_value.length; i += 1) { let child_ctx = get_each_context(ctx, each_value, i); let key = get_key(child_ctx); each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx)); } return { c() { ul = element("ul"); for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].c(); } attr(ul, "class", "toast-list svelte-1ajyjqe"); toggle_class(ul, "hidden", ctx[2]); toggle_class(ul, "top", ctx[1] === ToastPosition.topLeft || ctx[1] === ToastPosition.topRight); toggle_class(ul, "bottom", ctx[1] === ToastPosition.bottomLeft || ctx[1] === ToastPosition.bottomRight); toggle_class(ul, "left", ctx[1] === ToastPosition.bottomLeft || ctx[1] === ToastPosition.topLeft); toggle_class(ul, "right", ctx[1] === ToastPosition.bottomRight || ctx[1] === ToastPosition.topRight); }, m(target, anchor) { insert(target, ul, anchor); for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].m(ul, null); } current = true; }, p(ctx2, [dirty]) { if (dirty & 11) { each_value = ctx2[0]; group_outros(); each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, ul, outro_and_destroy_block, create_each_block, null, get_each_context); check_outros(); } if (dirty & 4) { toggle_class(ul, "hidden", ctx2[2]); } if (dirty & 2) { toggle_class(ul, "top", ctx2[1] === ToastPosition.topLeft || ctx2[1] === ToastPosition.topRight); } if (dirty & 2) { toggle_class(ul, "bottom", ctx2[1] === ToastPosition.bottomLeft || ctx2[1] === ToastPosition.bottomRight); } if (dirty & 2) { toggle_class(ul, "left", ctx2[1] === ToastPosition.bottomLeft || ctx2[1] === ToastPosition.topLeft); } if (dirty & 2) { toggle_class(ul, "right", ctx2[1] === ToastPosition.bottomRight || ctx2[1] === ToastPosition.topRight); } }, i(local) { if (current) return; for (let i = 0; i < each_value.length; i += 1) { transition_in(each_blocks[i]); } current = true; }, o(local) { for (let i = 0; i < each_blocks.length; i += 1) { transition_out(each_blocks[i]); } current = false; }, d(detaching) { if (detaching) detach(ul); for (let i = 0; i < each_blocks.length; i += 1) { each_blocks[i].d(); } } }; } function instance$1($$self, $$props, $$invalidate) { let { toasts: toasts2 } = $$props; let { position = ToastPosition.topRight } = $$props; let hidden = true; function toastCloseHandler() { $$invalidate(2, hidden = toasts2.length ? false : true); } function toast_clicked_handler(event) { bubble.call(this, $$self, event); } function toast_closed_handler(event) { bubble.call(this, $$self, event); } $$self.$$set = ($$props2) => { if ("toasts" in $$props2) $$invalidate(0, toasts2 = $$props2.toasts); if ("position" in $$props2) $$invalidate(1, position = $$props2.position); }; $$self.$$.update = () => { if ($$self.$$.dirty & 1) { { if (toasts2.length) $$invalidate(2, hidden = false); } } }; return [ toasts2, position, hidden, toastCloseHandler, toast_clicked_handler, toast_closed_handler ]; } class ToastList extends SvelteComponent { constructor(options) { super(); init(this, options, instance$1, create_fragment$1, safe_not_equal, { toasts: 0, position: 1 }); } } const defaultToastConf = { position: ToastPosition.topRight, type: ToastType.info, displayTime: 20, dark: false, marginBottom: 0, marginTop: 0, mobilePosition: ToastMobilePosition.bottom }; var JSToaster_svelte_svelte_type_style_lang = ""; function create_fragment(ctx) { let div; let toastlistcomponent0; let t0; let toastlistcomponent1; let t1; let toastlistcomponent2; let t2; let toastlistcomponent3; let current; toastlistcomponent0 = new ToastList({ props: { toasts: ctx[6], position: ToastPosition.topLeft } }); toastlistcomponent0.$on("toast-clicked", ctx[11]); toastlistcomponent0.$on("toast-closed", ctx[10]); toastlistcomponent0.$on("toast-closed", ctx[12]); toastlistcomponent1 = new ToastList({ props: { toasts: ctx[7], position: ToastPosition.topRight } }); toastlistcomponent1.$on("toast-clicked", ctx[13]); toastlistcomponent1.$on("toast-closed", ctx[10]); toastlistcomponent1.$on("toast-closed", ctx[14]); toastlistcomponent2 = new ToastList({ props: { toasts: ctx[8], position: ToastPosition.bottomRight } }); toastlistcomponent2.$on("toast-clicked", ctx[15]); toastlistcomponent2.$on("toast-closed", ctx[10]); toastlistcomponent2.$on("toast-closed", ctx[16]); toastlistcomponent3 = new ToastList({ props: { toasts: ctx[9], position: ToastPosition.bottomLeft } }); toastlistcomponent3.$on("toast-clicked", ctx[17]); toastlistcomponent3.$on("toast-closed", ctx[10]); toastlistcomponent3.$on("toast-closed", ctx[18]); return { c() { div = element("div"); create_component(toastlistcomponent0.$$.fragment); t0 = space(); create_component(toastlistcomponent1.$$.fragment); t1 = space(); create_component(toastlistcomponent2.$$.fragment); t2 = space(); create_component(toastlistcomponent3.$$.fragment); attr(div, "class", "jstoaster svelte-11ehapq"); set_style(div, "--jstoaster-margin-top", ctx[1]); set_style(div, "--jstoaster-margin-bottom", ctx[2]); set_style(div, "--jstoaster-mob-margin-top", ctx[3]); set_style(div, "--jstoaster-mob-margin-bottom", ctx[4]); toggle_class(div, "bottom", ctx[0].mobilePosition === ToastMobilePosition.bottom); toggle_class(div, "hidden", ctx[5]); }, m(target, anchor) { insert(target, div, anchor); mount_component(toastlistcomponent0, div, null); append(div, t0); mount_component(toastlistcomponent1, div, null); append(div, t1); mount_component(toastlistcomponent2, div, null); append(div, t2); mount_component(toastlistcomponent3, div, null); current = true; }, p(ctx2, [dirty]) { const toastlistcomponent0_changes = {}; if (dirty & 64) toastlistcomponent0_changes.toasts = ctx2[6]; toastlistcomponent0.$set(toastlistcomponent0_changes); const toastlistcomponent1_changes = {}; if (dirty & 128) toastlistcomponent1_changes.toasts = ctx2[7]; toastlistcomponent1.$set(toastlistcomponent1_changes); const toastlistcomponent2_changes = {}; if (dirty & 256) toastlistcomponent2_changes.toasts = ctx2[8]; toastlistcomponent2.$set(toastlistcomponent2_changes); const toastlistcomponent3_changes = {}; if (dirty & 512) toastlistcomponent3_changes.toasts = ctx2[9]; toastlistcomponent3.$set(toastlistcomponent3_changes); if (!current || dirty & 2) { set_style(div, "--jstoaster-margin-top", ctx2[1]); } if (!current || dirty & 4) { set_style(div, "--jstoaster-margin-bottom", ctx2[2]); } if (!current || dirty & 8) { set_style(div, "--jstoaster-mob-margin-top", ctx2[3]); } if (!current || dirty & 16) { set_style(div, "--jstoaster-mob-margin-bottom", ctx2[4]); } if (dirty & 1) { toggle_class(div, "bottom", ctx2[0].mobilePosition === ToastMobilePosition.bottom); } if (dirty & 32) { toggle_class(div, "hidden", ctx2[5]); } }, i(local) { if (current) return; transition_in(toastlistcomponent0.$$.fragment, local); transition_in(toastlistcomponent1.$$.fragment, local); transition_in(toastlistcomponent2.$$.fragment, local); transition_in(toastlistcomponent3.$$.fragment, local); current = true; }, o(local) { transition_out(toastlistcomponent0.$$.fragment, local); transition_out(toastlistcomponent1.$$.fragment, local); transition_out(toastlistcomponent2.$$.fragment, local); transition_out(toastlistcomponent3.$$.fragment, local); current = false; }, d(detaching) { if (detaching) detach(div); destroy_component(toastlistcomponent0); destroy_component(toastlistcomponent1); destroy_component(toastlistcomponent2); destroy_component(toastlistcomponent3); } }; } function instance($$self, $$props, $$invalidate) { let $toasts; let $topLeftToasts; let $topRightToasts; let $bottomRightToasts; let $bottomLeftToasts; component_subscribe($$self, toasts, ($$value) => $$invalidate(19, $toasts = $$value)); component_subscribe($$self, topLeftToasts, ($$value) => $$invalidate(6, $topLeftToasts = $$value)); component_subscribe($$self, topRightToasts, ($$value) => $$invalidate(7, $topRightToasts = $$value)); component_subscribe($$self, bottomRightToasts, ($$value) => $$invalidate(8, $bottomRightToasts = $$value)); component_subscribe($$self, bottomLeftToasts, ($$value) => $$invalidate(9, $bottomLeftToasts = $$value)); let { conf = defaultToastConf } = $$props; let marginTop; let marginBottom; let mobileMarginTop; let mobileMarginBottom; let hidden = true; const unsub = toasts.subscribe((toastsArr) => { if (toastsArr.length) $$invalidate(5, hidden = false); }); function toastCloseHandler() { $$invalidate(5, hidden = $toasts.length ? false : true); } onDestroy(() => unsub()); function toast_clicked_handler(event) { bubble.call(this, $$self, event); } function toast_closed_handler(event) { bubble.call(this, $$self, event); } function toast_clicked_handler_1(event) { bubble.call(this, $$self, event); } function toast_closed_handler_1(event) { bubble.call(this, $$self, event); } function toast_clicked_handler_2(event) { bubble.call(this, $$self, event); } function toast_closed_handler_2(event) { bubble.call(this, $$self, event); } function toast_clicked_handler_3(event) { bubble.call(this, $$self, event); } function toast_closed_handler_3(event) { bubble.call(this, $$self, event); } $$self.$$set = ($$props2) => { if ("conf" in $$props2) $$invalidate(0, conf = $$props2.conf); }; $$self.$$.update = () => { if ($$self.$$.dirty & 1) { { $$invalidate(1, marginTop = `${conf.marginTop}px`); $$invalidate(2, marginBottom = `${conf.marginBottom}px`); if (conf.mobilePosition === ToastMobilePosition.top) { $$invalidate(3, mobileMarginTop = `${conf.mobileMargin >= 0 ? conf.mobileMargin : conf.marginTop}px`); $$invalidate(4, mobileMarginBottom = "0px"); } else { $$invalidate(4, mobileMarginBottom = `${conf.mobileMargin >= 0 ? conf.mobileMargin : conf.marginBottom}px`); $$invalidate(3, mobileMarginTop = "0px"); } } } }; return [ conf, marginTop, marginBottom, mobileMarginTop, mobileMarginBottom, hidden, $topLeftToasts, $topRightToasts, $bottomRightToasts, $bottomLeftToasts, toastCloseHandler, toast_clicked_handler, toast_closed_handler, toast_clicked_handler_1, toast_closed_handler_1, toast_clicked_handler_2, toast_closed_handler_2, toast_clicked_handler_3, toast_closed_handler_3 ]; } class JSToaster$1 extends SvelteComponent { constructor(options) { super(); init(this, options, instance, create_fragment, safe_not_equal, { conf: 0 }); } } class JSToaster { constructor() { __publicField(this, "app"); __publicField(this, "service"); __publicField(this, "clickHandlers", []); __publicField(this, "closeHandlers", []); __publicField(this, "toasterConf"); this.app = new JSToaster$1({ target: document.body }); this.app.$on("toast-clicked", (event) => { this.clickHandlers.forEach((handler) => handler(event.detail)); }); this.app.$on("toast-closed", (event) => { this.closeHandlers.forEach((handler) => handler(event.detail)); }); this.service = jsToasterService; this.toasterConf = defaultToastConf; this.service.conf = defaultToastConf; } set conf(toasterConf) { this.toasterConf = __spreadValues(__spreadValues({}, this.toasterConf), toasterConf); this.service.conf = this.toasterConf; this.app.$set({ conf: this.toasterConf }); } toast(toast) { let t; if (typeof toast === "string") { t = { message: toast }; } else { t = toast; } if (this.service) { return this.service.toast(t); } else { return 0; } } onClickToast(handler) { this.clickHandlers.push(handler); } onCloseToast(handler) { this.closeHandlers.push(handler); } } const jsToaster = new JSToaster(); export { jsToaster }; //# sourceMappingURL=jsToaster.js.map