axentix/dist/components/caroulix/caroulix.esm.js

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

var lt = Object.defineProperty;
var K = (e) => {
  throw TypeError(e);
};
var ct = (e, s, t) => s in e ? lt(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
var S = (e, s, t) => ct(e, typeof s != "symbol" ? s + "" : s, t), B = (e, s, t) => s.has(e) || K("Cannot " + t);
var i = (e, s, t) => (B(e, s, "read from private field"), t ? t.call(e) : s.get(e)), h = (e, s, t) => s.has(e) ? K("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), o = (e, s, t, n) => (B(e, s, "write to private field"), n ? n.call(e, t) : s.set(e, t), t), r = (e, s, t) => (B(e, s, "access private method"), t);
var W = (e, s, t, n) => ({
  set _(l) {
    o(e, s, l, t);
  },
  get _() {
    return i(e, s, n);
  }
});
const H = [], N = {
  components: [],
  plugins: [],
  prefix: "ax",
  mode: ""
}, U = (e) => N.components.find((s) => s.name === e).class, _ = () => {
  const e = N.components.filter((t) => t.dataDetection), s = N.plugins.filter((t) => t.dataDetection);
  return [...e, ...s].map((t) => t.name);
}, dt = (e, s) => {
  if (!e.name || !e.class) {
    console.error(`[Axentix] Error registering ${s} : Missing required parameters.`);
    return;
  }
  if (N[s].some((t) => t.name === e.name)) {
    console.error(`[Axentix] Error registering ${s} : Already exist.`);
    return;
  }
  e.autoInit && (e.autoInit.selector = e.autoInit.selector += ":not(.no-axentix-init)"), N[s].push(e);
}, ut = (e) => {
  dt(e, "components");
}, pt = (e) => e.replace(/[\w]([A-Z])/g, (s) => s[0] + "-" + s[1]).toLowerCase(), ft = (e, s = "") => {
  const t = pt(e);
  return s ? s + "-" + t : t;
}, vt = (e, s, t, n, l = "") => {
  const d = s[0].toUpperCase() + s.slice(1).toLowerCase();
  _().includes(d) && t !== "Collapsible" && d !== "Sidenav" && (e[s] = U(d).getDefaultOptions());
  const v = l ? l + "-" + s : s, $ = j(e[s], t, n, v);
  if (!(Object.keys($).length === 0 && e.constructor === Object)) return $;
}, j = (e, s, t, n = "") => Object.keys(e).reduce((l, d) => {
  if (typeof e[d] == "object" && e[d] !== null) {
    const v = vt(e, d, s, t, n);
    v && (l[d] = v);
  } else if (e[d] !== null) {
    const v = "data-" + s.toLowerCase() + "-" + ft(d, n);
    if (t.hasAttribute(v)) {
      const $ = t.getAttribute(v);
      l[d] = typeof e[d] == "number" ? Number($) : $, typeof e[d] == "boolean" && (l[d] = $ === "true");
    }
  }
  return l;
}, {}), xt = (e, s) => {
  const t = Object.assign({}, U(e).getDefaultOptions());
  return j(t, e, s);
}, gt = () => {
  document.querySelectorAll("[data-ax]").forEach((s) => {
    let t = s.dataset.ax;
    if (t = t[0].toUpperCase() + t.slice(1).toLowerCase(), !_().includes(t)) {
      console.error(
        `[Axentix] Error: ${t} component doesn't exist. 
 Did you forget to register him ?`,
        s
      );
      return;
    }
    try {
      const n = U(t);
      new n(`#${s.id}`);
    } catch (n) {
      console.error("[Axentix] Data: Unable to load " + t, n);
    }
  });
}, mt = () => {
  try {
    new Axentix.Axentix("all");
  } catch (e) {
    console.error("[Axentix] Unable to auto init.", e);
  }
};
document.addEventListener("DOMContentLoaded", () => {
  document.documentElement.dataset.axentix && mt(), gt();
});
const tt = (...e) => e.reduce((s, t) => {
  for (let n in t)
    s[n] = typeof t[n] == "object" && t[n] !== null ? tt(s[n], t[n]) : t[n];
  return s;
}, {}), yt = (e, s, t) => tt(U(e).getDefaultOptions(), xt(e, t), s), b = (e, s, t) => {
  const n = new CustomEvent("ax." + s, {
    detail: t || {},
    bubbles: !0
  });
  e.dispatchEvent(n);
}, Lt = () => (
  // @ts-ignore
  "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
), bt = () => !!window.PointerEvent && "maxTouchPoints" in window.navigator && window.navigator.maxTouchPoints >= 0, Et = () => Lt() ? "touch" : bt() ? "pointer" : "mouse", It = (e) => {
  const s = H.find((t) => t.type !== "Toast" && "#" + t.instance.el.id === e);
  return s ? s.instance : !1;
}, Q = (e) => e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientY : e.changedTouches && e.changedTouches.length >= 1 ? e.changedTouches[0].pageY : e.clientY, V = (e) => e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientX : e.changedTouches && e.changedTouches.length >= 1 ? e.changedTouches[0].pageX : e.clientX;
class wt {
  constructor() {
    S(this, "el");
  }
  removeListeners() {
  }
  setupListeners() {
  }
  setup() {
  }
  preventDbInstance(s) {
    if (s && It(s)) throw new Error(`Instance already exist on ${s}`);
  }
  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 s = H.findIndex((t) => t.instance.el.id === this.el.id);
    H.splice(s, 1);
  }
}
const Tt = {
  animationDuration: 500,
  height: "",
  backToOpposite: !0,
  enableTouch: !0,
  indicators: {
    enabled: !1,
    isFlat: !1,
    customClasses: ""
  },
  autoplay: {
    enabled: !0,
    interval: 5e3,
    side: "right"
  }
};
var E, g, c, I, k, w, P, T, f, M, C, m, y, D, O, A, R, x, X, q, p, F, u, a, it, st, Z, L, Y, nt, ot, at, rt, ht, G, z, J;
class et extends wt {
  constructor(t, n) {
    super();
    h(this, a);
    S(this, "options");
    S(this, "activeIndex");
    h(this, E, 0);
    h(this, g, !1);
    h(this, c);
    h(this, I, 0);
    h(this, k, 0);
    h(this, w, !1);
    h(this, P, !1);
    h(this, T, !1);
    h(this, f, 0);
    h(this, M, 0);
    h(this, C);
    h(this, m);
    h(this, y);
    h(this, D);
    h(this, O);
    h(this, A);
    h(this, R);
    h(this, x);
    h(this, X, 0);
    h(this, q, 0);
    h(this, p);
    h(this, F);
    h(this, u);
    try {
      this.preventDbInstance(t), H.push({ type: "Caroulix", instance: this }), this.el = document.querySelector(t), this.options = yt("Caroulix", n, this.el), this.setup();
    } catch (l) {
      console.error("[Axentix] Caroulix init error", l);
    }
  }
  setup() {
    b(this.el, "caroulix.setup"), this.options.autoplay.side = this.options.autoplay.side.toLowerCase(), ["right", "left"].includes(this.options.autoplay.side) || (this.options.autoplay.side = "right"), this.activeIndex = 0, o(this, E, 0), o(this, g, !1), o(this, u, Et()), o(this, c, r(this, a, it).call(this)), this.options.indicators.enabled && r(this, a, rt).call(this);
    const n = this.el.querySelector(".active");
    n ? this.activeIndex = i(this, c).indexOf(n) : i(this, c)[0].classList.add("active"), r(this, a, st).call(this), i(this, I) === 0 && r(this, a, Y).call(this), this.setupListeners(), this.options.autoplay.enabled && this.play();
  }
  setupListeners() {
    o(this, C, r(this, a, Y).bind(this)), window.addEventListener("resize", i(this, C)), i(this, y) && (o(this, D, this.next.bind(this, 1)), i(this, y).addEventListener("click", i(this, D))), i(this, m) && (o(this, O, this.prev.bind(this, 1)), i(this, m).addEventListener("click", i(this, O))), this.options.enableTouch && (o(this, A, r(this, a, nt).bind(this)), o(this, R, r(this, a, ot).bind(this)), o(this, x, r(this, a, at).bind(this)), this.el.addEventListener(
      `${i(this, u)}${i(this, u) === "touch" ? "start" : "down"}`,
      i(this, A)
    ), this.el.addEventListener(`${i(this, u)}move`, i(this, R)), this.el.addEventListener(
      `${i(this, u)}${i(this, u) === "touch" ? "end" : "up"}`,
      i(this, x)
    ), this.el.addEventListener(
      i(this, u) === "pointer" ? "pointerleave" : "mouseleave",
      i(this, x)
    ));
  }
  removeListeners() {
    window.removeEventListener("resize", i(this, C)), o(this, C, void 0), i(this, y) && (i(this, y).removeEventListener("click", i(this, D)), o(this, D, void 0)), i(this, m) && (i(this, m).removeEventListener("click", i(this, O)), o(this, O, void 0)), this.options.enableTouch && (this.el.removeEventListener(
      `${i(this, u)}${i(this, u) === "pointer" ? "down" : "start"}`,
      i(this, A)
    ), this.el.removeEventListener(`${i(this, u)}move`, i(this, R)), this.el.removeEventListener(
      `${i(this, u)}${i(this, u) === "touch" ? "end" : "up"}`,
      i(this, x)
    ), this.el.removeEventListener(
      i(this, u) === "pointer" ? "pointerleave" : "mouseleave",
      i(this, x)
    ), o(this, A, void 0), o(this, R, void 0), o(this, x, void 0));
  }
  goTo(t) {
    if (t === this.activeIndex) return;
    (t > this.activeIndex ? "right" : "left") === "left" ? this.prev(Math.abs(this.activeIndex - t)) : this.next(Math.abs(this.activeIndex - t)), this.options.indicators.enabled && r(this, a, G).call(this);
  }
  play() {
    this.options.autoplay.enabled && (this.stop(), o(this, F, setInterval(() => {
      this.options.autoplay.side === "right" ? this.next(1, !1) : this.prev(1, !1);
    }, this.options.autoplay.interval)));
  }
  stop() {
    this.options.autoplay.enabled && clearInterval(i(this, F));
  }
  next(t = 1, n = !0) {
    i(this, w) || this.activeIndex === i(this, c).length - 1 && !this.options.backToOpposite || (b(this.el, "caroulix.next", { step: t }), o(this, g, !0), n && this.options.autoplay.enabled && this.stop(), this.activeIndex < i(this, c).length - 1 ? this.activeIndex += t : this.options.backToOpposite && (this.activeIndex = 0), r(this, a, J).call(this), r(this, a, L).call(this), n && this.options.autoplay.enabled && this.play());
  }
  prev(t = 1, n = !0) {
    i(this, w) || this.activeIndex === 0 && !this.options.backToOpposite || (b(this.el, "caroulix.prev", { step: t }), o(this, g, !0), n && this.options.autoplay.enabled && this.stop(), this.activeIndex > 0 ? this.activeIndex -= t : this.options.backToOpposite && (this.activeIndex = i(this, c).length - 1), r(this, a, J).call(this), r(this, a, L).call(this), n && this.options.autoplay.enabled && this.play());
  }
}
E = new WeakMap(), g = new WeakMap(), c = new WeakMap(), I = new WeakMap(), k = new WeakMap(), w = new WeakMap(), P = new WeakMap(), T = new WeakMap(), f = new WeakMap(), M = new WeakMap(), C = new WeakMap(), m = new WeakMap(), y = new WeakMap(), D = new WeakMap(), O = new WeakMap(), A = new WeakMap(), R = new WeakMap(), x = new WeakMap(), X = new WeakMap(), q = new WeakMap(), p = new WeakMap(), F = new WeakMap(), u = new WeakMap(), a = new WeakSet(), it = function() {
  return Array.from(this.el.children).reduce((t, n) => (n.classList.contains("caroulix-item") && t.push(n), n.classList.contains("caroulix-prev") && o(this, m, n), n.classList.contains("caroulix-next") && o(this, y, n), t), []);
}, st = function() {
  o(this, I, 0), o(this, k, 0), i(this, c).forEach((t) => {
    const n = t.querySelector("img, video");
    n && (W(this, I)._++, n.complete ? r(this, a, Z).call(this, n, !0) : (n.loadRef = r(this, a, Z).bind(this, n), n.addEventListener("load", n.loadRef)));
  });
}, Z = function(t, n) {
  W(this, k)._++, n || (t.removeEventListener("load", t.loadRef), t.loadRef = void 0), i(this, I) == i(this, k) && (r(this, a, Y).call(this), r(this, a, L).call(this, !0));
}, L = function(t = !1) {
  const n = this.el.getBoundingClientRect().width;
  i(this, c).forEach((d, v) => {
    d.style.transform = `translateX(${n * v - n * this.activeIndex - i(this, E)}px)`;
  }), this.options.indicators.enabled && r(this, a, G).call(this), i(this, c).find((d) => d.classList.contains("active")).classList.remove("active"), i(this, c)[this.activeIndex].classList.add("active"), setTimeout(() => {
    o(this, g, !1);
  }, this.options.animationDuration), t && setTimeout(() => r(this, a, z).call(this, this.options.animationDuration), 50);
}, Y = function() {
  if (o(this, w, !0), this.el.style.transitionDuration = "", this.options.autoplay.enabled && this.play(), this.options.height)
    this.el.style.height = this.options.height;
  else {
    const t = i(this, c).map((l) => l.offsetHeight), n = Math.max(...t);
    this.el.style.height = n + "px";
  }
  r(this, a, L).call(this), setTimeout(() => {
    this.el.style.transitionDuration = this.options.animationDuration + "ms", o(this, w, !1);
  }, 50);
}, nt = function(t) {
  t.target.closest(".caroulix-arrow") || t.target.closest(".caroulix-indicators") || i(this, g) || (t.type !== "touchstart" && t.preventDefault(), this.options.autoplay.enabled && this.stop(), r(this, a, z).call(this, 0), o(this, T, !0), o(this, P, !1), o(this, f, 0), o(this, M, 0), o(this, X, V(t)), o(this, q, Q(t)));
}, ot = function(t) {
  if (!i(this, T) || i(this, P)) return;
  let n = V(t), l = Q(t);
  if (o(this, f, i(this, X) - n), o(this, M, Math.abs(i(this, q) - l)), t.type === "touchmove" && i(this, M) > Math.abs(i(this, f)))
    return o(this, P, !0), o(this, f, 0), !1;
  t.cancelable && t.preventDefault(), o(this, E, i(this, f)), r(this, a, L).call(this);
}, at = function(t) {
  if (!(t.target.closest(".caroulix-arrow") || t.target.closest(".caroulix-indicators")) && (t.cancelable && t.preventDefault(), i(this, T))) {
    r(this, a, z).call(this, this.options.animationDuration);
    let n = this.el.getBoundingClientRect().width;
    o(this, T, !1);
    const l = n * 15 / 100;
    this.activeIndex !== i(this, c).length - 1 && i(this, f) > l ? this.next() : this.activeIndex !== 0 && i(this, f) < -l && this.prev(), o(this, f, 0), o(this, E, 0), r(this, a, L).call(this), this.options.autoplay.enabled && this.play();
  }
}, rt = function() {
  o(this, p, document.createElement("ul")), i(this, p).classList.add("caroulix-indicators"), this.options.indicators.isFlat && i(this, p).classList.add("caroulix-flat"), this.options.indicators.customClasses && (i(this, p).className = `${i(this, p).className} ${this.options.indicators.customClasses}`);
  for (let t = 0; t < i(this, c).length; t++) {
    const n = document.createElement("li");
    n.triggerRef = r(this, a, ht).bind(this, t), n.addEventListener("click", n.triggerRef), i(this, p).appendChild(n);
  }
  this.el.appendChild(i(this, p));
}, ht = function(t, n) {
  n.preventDefault(), t !== this.activeIndex && this.goTo(t);
}, G = function() {
  Array.from(i(this, p).children).forEach((t) => t.removeAttribute("class")), i(this, p).children[this.activeIndex].classList.add("active");
}, z = function(t) {
  this.el.style.transitionDuration = t + "ms";
}, J = function() {
  b(this.el, "caroulix.slide", {
    nextElement: i(this, c)[this.activeIndex],
    currentElement: i(this, c)[i(this, c).findIndex((t) => t.classList.contains("active"))]
  });
}, S(et, "getDefaultOptions", () => Tt);
ut({
  class: et,
  name: "Caroulix",
  dataDetection: !0,
  autoInit: {
    enabled: !0,
    selector: ".caroulix"
  }
});
export {
  et as default
};