axentix/dist/components/toast/toast.esm.js

Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.

var z = Object.defineProperty;
var S = (i) => {
  throw TypeError(i);
};
var F = (i, t, e) => t in i ? z(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
var v = (i, t, e) => F(i, typeof t != "symbol" ? t + "" : t, e), L = (i, t, e) => t.has(i) || S("Cannot " + e);
var n = (i, t, e) => (L(i, t, "read from private field"), e ? e.call(i) : t.get(i)), l = (i, t, e) => t.has(i) ? S("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e), a = (i, t, e, s) => (L(i, t, "write to private field"), s ? s.call(i, e) : t.set(i, e), e), r = (i, t, e) => (L(i, t, "access private method"), e);
const E = [], f = {
  components: [],
  plugins: [],
  prefix: "ax",
  mode: ""
}, T = (i) => `--${f.prefix}-${i}`, V = (i) => f.components.find((t) => t.name === i).class, G = () => {
  const i = f.components.filter((e) => e.dataDetection), t = f.plugins.filter((e) => e.dataDetection);
  return [...i, ...t].map((e) => e.name);
}, J = (i, t) => {
  if (!i.name || !i.class) {
    console.error(`[Axentix] Error registering ${t} : Missing required parameters.`);
    return;
  }
  if (f[t].some((e) => e.name === i.name)) {
    console.error(`[Axentix] Error registering ${t} : Already exist.`);
    return;
  }
  i.autoInit && (i.autoInit.selector = i.autoInit.selector += ":not(.no-axentix-init)"), f[t].push(i);
}, K = (i) => {
  J(i, "components");
}, Q = () => {
  document.querySelectorAll("[data-ax]").forEach((t) => {
    let e = t.dataset.ax;
    if (e = e[0].toUpperCase() + e.slice(1).toLowerCase(), !G().includes(e)) {
      console.error(
        `[Axentix] Error: ${e} component doesn't exist. 
 Did you forget to register him ?`,
        t
      );
      return;
    }
    try {
      const s = V(e);
      new s(`#${t.id}`);
    } catch (s) {
      console.error("[Axentix] Data: Unable to load " + e, s);
    }
  });
}, W = () => {
  try {
    new Axentix.Axentix("all");
  } catch (i) {
    console.error("[Axentix] Unable to auto init.", i);
  }
};
document.addEventListener("DOMContentLoaded", () => {
  document.documentElement.dataset.axentix && W(), Q();
});
const P = (...i) => i.reduce((t, e) => {
  for (let s in e)
    t[s] = typeof e[s] == "object" && e[s] !== null ? P(t[s], e[s]) : e[s];
  return t;
}, {}), w = (i, t, e) => {
  const s = new CustomEvent("ax." + t, {
    detail: {},
    bubbles: !0
  });
  i.dispatchEvent(s);
}, Z = () => (
  // @ts-ignore
  "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
), j = () => !!window.PointerEvent && "maxTouchPoints" in window.navigator && window.navigator.maxTouchPoints >= 0, _ = () => Z() ? "touch" : j() ? "pointer" : "mouse", tt = (i) => E.filter((t) => t.type === i).map((t) => t.instance), D = (i) => i.targetTouches && i.targetTouches.length >= 1 ? i.targetTouches[0].clientX : i.changedTouches && i.changedTouches.length >= 1 ? i.changedTouches[0].pageX : i.clientX, et = {
  animationDuration: 400,
  duration: 4e3,
  classes: "",
  position: "right",
  direction: "top",
  mobileDirection: "bottom",
  offset: { x: "5%", y: "0%", mobileX: "10%", mobileY: "0%" },
  isClosable: !1,
  isSwipeable: !0,
  closableContent: "x",
  loading: {
    enabled: !0,
    border: "2px solid #E2E2E2"
  }
};
var u, c, h, x, b, m, d, p, o, M, R, O, k, I, X, B, q, H, N, U, Y, y;
const C = class C {
  constructor(t, e) {
    l(this, o);
    v(this, "options");
    v(this, "id");
    l(this, u);
    l(this, c);
    l(this, h);
    l(this, x);
    l(this, b);
    l(this, m);
    l(this, d);
    l(this, p);
    if (tt("Toast").length > 0) {
      console.error("[Axentix] Toast: Don't try to create multiple toast instances");
      return;
    }
    E.push({ type: "Toast", instance: this }), this.id = Math.random().toString().split(".")[1], a(this, u, t), this.options = P(C.getDefaultOptions(), e), a(this, h, _()), this.options.position = this.options.position.toLowerCase(), this.options.direction = this.options.direction.toLowerCase(), this.options.mobileDirection = this.options.mobileDirection.toLowerCase(), a(this, c, {});
  }
  destroy() {
    const t = E.findIndex((e) => e.instance.id === this.id);
    E.splice(t, 1);
  }
  /** Showing the toast */
  show() {
    try {
      Object.keys(n(this, c)).includes(this.options.position) || r(this, o, M).call(this), r(this, o, Y).call(this);
    } catch (t) {
      console.error("[Axentix] Toast error", t);
    }
  }
  /** Change */
  change(t, e) {
    a(this, u, t), this.options = P(this.options, e);
  }
};
u = new WeakMap(), c = new WeakMap(), h = new WeakMap(), x = new WeakMap(), b = new WeakMap(), m = new WeakMap(), d = new WeakMap(), p = new WeakMap(), o = new WeakSet(), /** Create toast container */
M = function() {
  let t = document.createElement("div");
  ["right", "left"].includes(this.options.position) || (this.options.position = "right"), this.options.position === "right" ? t.style.right = this.options.offset.x : t.style.left = this.options.offset.x;
  const s = ["bottom", "top"];
  s.includes(this.options.direction) || (this.options.direction = "top"), this.options.direction === "top" ? t.style.top = this.options.offset.y : t.style.bottom = this.options.offset.y, s.includes(this.options.mobileDirection) || (this.options.mobileDirection = "bottom"), t.style.setProperty(
    T("toaster-m-width"),
    100 - this.options.offset.mobileX.slice(0, -1) + "%"
  ), t.style.setProperty(T("toaster-m-offset"), this.options.offset.mobileY), this.options.loading.enabled && t.style.setProperty(T("toast-loading-border"), this.options.loading.border), t.className = `toaster toaster-${this.options.position} toast-${this.options.direction} toaster-m-${this.options.mobileDirection}`, n(this, c)[this.options.position] = t, document.body.appendChild(t);
}, /** Remove toast container */
R = function() {
  for (const t in n(this, c)) {
    let e = n(this, c)[t];
    e.childElementCount <= 0 && (e.remove(), delete n(this, c)[t]);
  }
}, /** Toast in animation */
O = function(t) {
  setTimeout(() => {
    w(t, "toast.show"), this.options.loading.enabled && (t.classList.add("toast-loading"), t.style.setProperty(T("toast-loading-duration"), this.options.duration + "ms")), t.classList.add("toast-animated"), setTimeout(() => {
      w(t, "toast.shown"), this.options.loading.enabled && t.classList.add("toast-load");
    }, this.options.animationDuration);
  }, 50);
}, /** Toast out animation */
k = function(t) {
  setTimeout(() => {
    w(t, "toast.hide"), r(this, o, y).call(this, t);
  }, this.options.duration + this.options.animationDuration);
}, /** Anim out toast */
I = function(t) {
  t.style.transitionTimingFunction = "cubic-bezier(0.445, 0.05, 0.55, 0.95)", t.style.paddingTop = "0", t.style.paddingBottom = "0", t.style.margin = "0", t.style.height = "0";
}, X = function(t) {
  a(this, x, r(this, o, q).bind(this)), a(this, b, r(this, o, H).bind(this)), a(this, m, r(this, o, N).bind(this)), t.addEventListener(
    `${n(this, h)}${n(this, h) === "touch" ? "start" : "down"}`,
    n(this, x)
  ), t.addEventListener(`${n(this, h)}move`, n(this, b)), t.addEventListener(
    `${n(this, h)}${n(this, h) === "touch" ? "end" : "up"}`,
    n(this, m)
  ), t.addEventListener(
    n(this, h) === "pointer" ? "pointerleave" : "mouseleave",
    n(this, m)
  );
}, B = function(t) {
  t.querySelectorAll("[data-toast-close]").forEach((e) => {
    e.addEventListener("click", () => {
      r(this, o, y).call(this, t);
    });
  });
}, q = function(t) {
  if (t.target.closest(".toast-trigger")) return;
  const e = t.target.closest(".toast");
  e.dataset.closing || (a(this, p, D(t)), a(this, d, !0), e.style.transitionProperty = "height, margin, padding, transform, box-shadow");
}, H = function(t) {
  if (!n(this, d)) return;
  const e = t.target.closest(".toast"), s = e.getBoundingClientRect(), g = Math.abs(D(t) - n(this, p));
  e.style.left = D(t) - n(this, p) + "px", e.style.opacity = g < s.width ? (0.99 - g / s.width).toString() : "0.01";
}, N = function(t) {
  if (!n(this, d)) return;
  t.cancelable && t.preventDefault(), a(this, d, !1);
  const e = t.target.closest(".toast");
  e.style.transitionProperty = "height, margin, opacity, padding, transform, box-shadow, left", Math.abs(D(t) - n(this, p)) > e.getBoundingClientRect().width / 2 ? (r(this, o, y).call(this, e), e.dataset.closing = "true") : (e.style.left = "0px", e.style.opacity = 1);
}, U = function(t) {
  r(this, o, X).call(this, t);
}, Y = function() {
  let t = document.createElement("div");
  if (t.className = "toast shadow-1 " + this.options.classes, t.innerHTML = n(this, u), t.style.transitionDuration = this.options.animationDuration + "ms", this.options.isClosable) {
    let s = document.createElement("div");
    s.className = "toast-trigger", s.innerHTML = this.options.closableContent, s.listenerRef = r(this, o, y).bind(this, t, s), s.addEventListener("click", s.listenerRef), t.appendChild(s);
  }
  this.options.isSwipeable && r(this, o, U).call(this, t), r(this, o, O).call(this, t), r(this, o, B).call(this, t), n(this, c)[this.options.position].appendChild(t), r(this, o, k).call(this, t);
  const e = t.clientHeight;
  t.style.height = e + "px";
}, /** Hide toast */
y = function(t, e, s) {
  if (t.isAnimated) return;
  let g = 1;
  s && (s.preventDefault(), g = 0, this.options.isClosable && e.removeEventListener("click", e.listenerRef)), t.style.opacity = "0", t.isAnimated = !0;
  const $ = g * this.options.animationDuration + this.options.animationDuration;
  setTimeout(() => {
    r(this, o, I).call(this, t);
  }, $ / 2), setTimeout(() => {
    t.remove(), w(t, "toast.remove"), r(this, o, R).call(this);
  }, $ * 1.45);
}, v(C, "getDefaultOptions", () => et);
let A = C;
K({
  class: A,
  name: "Toast"
});
export {
  A as default
};