axentix/dist/components/fab/fab.esm.js

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

var U = Object.defineProperty;
var I = (s) => {
  throw TypeError(s);
};
var N = (s, t, e) => t in s ? U(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
var A = (s, t, e) => N(s, typeof t != "symbol" ? t + "" : t, e), O = (s, t, e) => t.has(s) || I("Cannot " + e);
var o = (s, t, e) => (O(s, t, "read from private field"), e ? e.call(s) : t.get(s)), l = (s, t, e) => t.has(s) ? I("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), n = (s, t, e, i) => (O(s, t, "write to private field"), i ? i.call(s, e) : t.set(s, e), e), y = (s, t, e) => (O(s, t, "access private method"), e);
const E = [], D = {
  components: [],
  plugins: [],
  prefix: "ax",
  mode: ""
}, C = (s) => D.components.find((t) => t.name === s).class, k = () => {
  const s = D.components.filter((e) => e.dataDetection), t = D.plugins.filter((e) => e.dataDetection);
  return [...s, ...t].map((e) => e.name);
}, P = (s, t) => {
  if (!s.name || !s.class) {
    console.error(`[Axentix] Error registering ${t} : Missing required parameters.`);
    return;
  }
  if (D[t].some((e) => e.name === s.name)) {
    console.error(`[Axentix] Error registering ${t} : Already exist.`);
    return;
  }
  s.autoInit && (s.autoInit.selector = s.autoInit.selector += ":not(.no-axentix-init)"), D[t].push(s);
}, X = (s) => {
  P(s, "components");
}, Y = (s) => s.replace(/[\w]([A-Z])/g, (t) => t[0] + "-" + t[1]).toLowerCase(), H = (s, t = "") => {
  const e = Y(s);
  return t ? t + "-" + e : e;
}, W = (s, t, e, i, h = "") => {
  const r = t[0].toUpperCase() + t.slice(1).toLowerCase();
  k().includes(r) && e !== "Collapsible" && r !== "Sidenav" && (s[t] = C(r).getDefaultOptions());
  const d = h ? h + "-" + t : t, v = w(s[t], e, i, d);
  if (!(Object.keys(v).length === 0 && s.constructor === Object)) return v;
}, w = (s, t, e, i = "") => Object.keys(s).reduce((h, r) => {
  if (typeof s[r] == "object" && s[r] !== null) {
    const d = W(s, r, t, e, i);
    d && (h[r] = d);
  } else if (s[r] !== null) {
    const d = "data-" + t.toLowerCase() + "-" + H(r, i);
    if (e.hasAttribute(d)) {
      const v = e.getAttribute(d);
      h[r] = typeof s[r] == "number" ? Number(v) : v, typeof s[r] == "boolean" && (h[r] = v === "true");
    }
  }
  return h;
}, {}), Z = (s, t) => {
  const e = Object.assign({}, C(s).getDefaultOptions());
  return w(e, s, t);
}, z = () => {
  document.querySelectorAll("[data-ax]").forEach((t) => {
    let e = t.dataset.ax;
    if (e = e[0].toUpperCase() + e.slice(1).toLowerCase(), !k().includes(e)) {
      console.error(
        `[Axentix] Error: ${e} component doesn't exist. 
 Did you forget to register him ?`,
        t
      );
      return;
    }
    try {
      const i = C(e);
      new i(`#${t.id}`);
    } catch (i) {
      console.error("[Axentix] Data: Unable to load " + e, i);
    }
  });
}, B = () => {
  try {
    new Axentix.Axentix("all");
  } catch (s) {
    console.error("[Axentix] Unable to auto init.", s);
  }
};
document.addEventListener("DOMContentLoaded", () => {
  document.documentElement.dataset.axentix && B(), z();
});
const F = (...s) => s.reduce((t, e) => {
  for (let i in e)
    t[i] = typeof e[i] == "object" && e[i] !== null ? F(t[i], e[i]) : e[i];
  return t;
}, {}), G = (s, t, e) => F(C(s).getDefaultOptions(), Z(s, e), t), b = (s, t, e) => {
  const i = new CustomEvent("ax." + t, {
    detail: {},
    bubbles: !0
  });
  s.dispatchEvent(i);
}, J = (s) => {
  const t = E.find((e) => e.type !== "Toast" && "#" + e.instance.el.id === s);
  return t ? t.instance : !1;
}, K = (s, t = '[data-target="{ID}"]') => Array.from(document.querySelectorAll(t.replace("{ID}", s)));
class Q {
  constructor() {
    A(this, "el");
  }
  removeListeners() {
  }
  setupListeners() {
  }
  setup() {
  }
  preventDbInstance(t) {
    if (t && J(t)) throw new Error(`Instance already exist on ${t}`);
  }
  sync() {
    b(this.el, "component.sync"), this.removeListeners(), this.setupListeners();
  }
  reset() {
    b(this.el, "component.reset"), this.removeListeners(), this.setup();
  }
  destroy() {
    b(this.el, "component.destroy"), this.removeListeners();
    const t = E.findIndex((e) => e.instance.el.id === this.el.id);
    E.splice(t, 1);
  }
}
const V = {
  animationDuration: 300,
  hover: !0,
  direction: "top",
  position: "bottom-right",
  offsetX: "1rem",
  offsetY: "1.5rem"
};
var p, a, L, u, f, m, g, x, c, S, T, $, M, R;
class q extends Q {
  constructor(e, i) {
    super();
    l(this, c);
    A(this, "options");
    l(this, p, !1);
    l(this, a, !1);
    l(this, L);
    l(this, u);
    l(this, f);
    l(this, m);
    l(this, g);
    l(this, x);
    try {
      this.preventDbInstance(e), E.push({ type: "Fab", instance: this }), this.el = document.querySelector(e), this.options = G("Fab", i, this.el), this.setup();
    } catch (h) {
      console.error("[Axentix] Fab init error", h);
    }
  }
  setup() {
    b(this.el, "fab.setup"), n(this, p, !1), n(this, a, !1), n(this, L, K(this.el.id)[0]), n(this, u, this.el.querySelector(".fab-menu")), y(this, c, S).call(this), this.setupListeners(), this.el.style.transitionDuration = this.options.animationDuration + "ms", y(this, c, T).call(this);
  }
  setupListeners() {
    this.options.hover ? (n(this, f, this.open.bind(this)), n(this, m, this.close.bind(this)), this.el.addEventListener("mouseenter", o(this, f)), this.el.addEventListener("mouseleave", o(this, m))) : (n(this, x, y(this, c, R).bind(this)), this.el.addEventListener("click", o(this, x))), n(this, g, y(this, c, M).bind(this)), document.addEventListener("click", o(this, g), !0);
  }
  removeListeners() {
    this.options.hover ? (this.el.removeEventListener("mouseenter", o(this, f)), this.el.removeEventListener("mouseleave", o(this, m)), n(this, f, void 0), n(this, m, void 0)) : (this.el.removeEventListener("click", o(this, x)), n(this, x, void 0)), document.removeEventListener("click", o(this, g), !0), n(this, g, void 0);
  }
  /** Open fab */
  open() {
    o(this, a) || (b(this.el, "fab.open"), n(this, p, !0), n(this, a, !0), this.el.classList.add("active"), setTimeout(() => {
      n(this, p, !1);
    }, this.options.animationDuration));
  }
  /** Close fab */
  close() {
    o(this, a) && (b(this.el, "fab.close"), n(this, p, !0), n(this, a, !1), this.el.classList.remove("active"), setTimeout(() => {
      n(this, p, !1);
    }, this.options.animationDuration));
  }
}
p = new WeakMap(), a = new WeakMap(), L = new WeakMap(), u = new WeakMap(), f = new WeakMap(), m = new WeakMap(), g = new WeakMap(), x = new WeakMap(), c = new WeakSet(), S = function() {
  ["right", "left", "top", "bottom"].includes(this.options.direction) || (this.options.direction = "top"), ["top-right", "top-left", "bottom-right", "bottom-left"].includes(this.options.position) || (this.options.position = "bottom-right");
}, T = function() {
  this.options.position.split("-")[0] === "top" ? this.el.style.top = this.options.offsetY : this.el.style.bottom = this.options.offsetY, this.options.position.split("-")[1] === "right" ? this.el.style.right = this.options.offsetX : this.el.style.left = this.options.offsetX, (this.options.direction === "right" || this.options.direction === "left") && this.el.classList.add("fab-dir-x"), y(this, c, $).call(this);
}, $ = function() {
  if (this.options.direction === "top" || this.options.direction === "bottom") {
    const e = o(this, L).clientHeight;
    this.options.direction === "top" ? o(this, u).style.bottom = e + "px" : o(this, u).style.top = e + "px";
  } else {
    const e = o(this, L).clientWidth;
    this.options.direction === "right" ? o(this, u).style.left = e + "px" : o(this, u).style.right = e + "px";
  }
}, M = function(e) {
  !this.el.contains(e.target) && o(this, a) && this.close();
}, R = function(e) {
  e.preventDefault(), !o(this, p) && (o(this, a) ? this.close() : this.open());
}, A(q, "getDefaultOptions", () => V);
X({
  class: q,
  name: "Fab",
  dataDetection: !0,
  autoInit: {
    enabled: !0,
    selector: ".fab:not(i)"
  }
});
export {
  q as default
};