@layers.digital/layers-design-system-vue3 1.22.0 → 1.22.2

package/dist/chunks/chunk-1647.js

@@ -0,0 +1,920 @@
+var Pt = Object.defineProperty, Vt = (t, e, s) => e in t ? Pt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, E = (t, e, s) => (Vt(t, typeof e != "symbol" ? e + "" : e, s), s), Zt = (t, e, s) => {
+  if (!e.has(t))
+    throw TypeError("Cannot " + s);
+}, y = (t, e, s) => {
+  if (e.has(t))
+    throw TypeError("Cannot add the same private member more than once");
+  e instanceof WeakSet ? e.add(t) : e.set(t, s);
+}, Y = (t, e, s) => (Zt(t, e, "access private method"), s);
+const kt = (t) => {
+  if (!t || typeof t != "object")
+    return !1;
+  const e = Object.getPrototypeOf(t);
+  return e === Object.prototype || e === null;
+}, vt = (t) => typeof t == "function", B = (t) => !isNaN(Number(t)), V = (t) => t == null, U = (t) => t instanceof HTMLElement ? t : document.querySelector(t), Z = (t, e) => e ? t.closest(`.${e}`) : null, x = (t) => "touches" in t ? t.touches.length === 0 ? { clientX: 0, clientY: 0 } : t.touches.length === 1 ? { clientX: t.touches[0].clientX, clientY: t.touches[0].clientY } : {
+  clientX: [...t.touches].reduce((e, s) => e + s.clientX, 0) / t.touches.length,
+  clientY: [...t.touches].reduce((e, s) => e + s.clientY, 0) / t.touches.length
+} : { clientX: t.clientX, clientY: t.clientY }, z = (t) => {
+  const { width: e, height: s, top: i, left: n, bottom: o } = t.getBoundingClientRect();
+  return {
+    width: e,
+    height: s,
+    top: i,
+    left: n,
+    bottom: o
+  };
+}, _t = (t) => t.touches.length >= 2 ? Math.hypot(t.touches[0].clientX - t.touches[1].clientX, t.touches[0].clientY - t.touches[1].clientY) : 0, M = (t, e) => {
+  for (const [s, i] of Object.entries(e))
+    typeof i == "string" && t.style.setProperty(s, i);
+}, R = (t, e) => {
+  for (const [s, i] of Object.entries(e))
+    t.setAttribute(s, i);
+}, _ = (t, e) => {
+  for (const [s, i] of Object.entries(e))
+    t[s] = i;
+}, D = (t, e, s) => Math.min(Math.max(t, e), s), X = (t) => isNaN(t) ? 0 : Math.round(t * 100) / 100, bt = (t) => {
+  throw new Error(t);
+}, G = (t) => console.warn(t), C = (t = "div", e, s, i) => {
+  const n = document.createElement(t);
+  return e && n.classList.add(...e.split(" ")), s && R(n, s), i && (n.innerHTML = i), n;
+}, g = "zoomist", Ut = `${g}-container`, wt = `${g}-wrapper`, J = `${g}-image`, Gt = `${g}-not-draggable`, Jt = `${g}-not-wheelable`, W = `${g}-slider`, Kt = `${g}-slider-wrapper`, Qt = `${g}-slider-bar`, te = `${g}-slider-button`, j = `${g}-zoomer`, ee = `${g}-zoomer-button`, ct = `${g}-zoomer-icon`, mt = `${g}-zoomer-in`, ut = `${g}-zoomer-out`, dt = `${g}-zoomer-reset`, se = `${g}-zoomer-disabled`, ie = {
+  tabindex: "0",
+  role: "slider",
+  "aria-label": "slider for zoomist",
+  "aria-valuemin": "0",
+  "aria-valuemax": "100",
+  "aria-valuenow": "0",
+  "aria-disabled": "false"
+}, ft = {
+  tabindex: "0",
+  role: "button",
+  type: "button",
+  "aria-disabled": "false"
+}, ne = {
+  ...ft,
+  "aria-label": "button for zoom in zoomist"
+}, oe = {
+  ...ft,
+  "aria-label": "button for zoom out zoomist"
+}, ae = {
+  ...ft,
+  "aria-label": "button for reset zoomist scale"
+}, re = typeof window < "u" && typeof window.document < "u", T = re && "ontouchstart" in window, le = T ? "touchstart" : "mousedown", yt = T ? "touchmove" : "mousemove", Yt = T ? "touchend" : "mouseup", he = "wheel", ce = ["left", "right", "center"], me = ["top", "bottom", "center"], Xt = "--scale", St = "--translate-x", Et = "--translate-y", ue = "--value", It = {
+  // set is draggable or not
+  draggable: !0,
+  // set is wheelable or not
+  wheelable: !0,
+  // set is pinchable or not
+  pinchable: !0,
+  // set image stuck on bounds
+  bounds: !0,
+  // the ratio of zooming at one time
+  zoomRatio: 0.1,
+  // the max scale of zoomist-image (must be number larger then initScale)
+  maxScale: 10,
+  // the min scale of zoomist-image (must be number smaller then initScale)
+  minScale: 1,
+  // set initial scale of zoomist-image
+  initScale: null,
+  // if set to true, enable to release touch events to allow for further page scrolling when .zoomist-image is on bounds.
+  dragReleaseOnBounds: !1,
+  // if set to true, enable to release wheel events to allow for further page scrolling when .zoomist-image is on mixScale or maxScale.
+  wheelReleaseOnMinMax: !1,
+  // elements matched this class will not be dragged.
+  disableDraggingClass: Gt,
+  // elements matched this class will not be zoomed by mouse wheel.
+  disableWheelingClass: Jt,
+  // if set to true, enable to smooth drag
+  smooth: !1
+}, de = {
+  // the css selector string or a element of the slider
+  el: null,
+  // the direction of the slider 'horizontal' or 'vertical'
+  direction: "horizontal"
+}, fe = {
+  el: `.${W}`
+}, ge = {
+  el: null,
+  // the css selector string or a element for in-zoomer
+  inEl: null,
+  // the css selector string or a element for out-zoomer
+  outEl: null,
+  // the css selector string or a element for reset-zoomer
+  resetEl: null,
+  // in zoomer and out zoomer will be disabled when image comes to maximin or minimum
+  disabledClass: se
+}, pe = {
+  el: `.${j}`,
+  inEl: `.${mt}`,
+  outEl: `.${ut}`,
+  resetEl: `.${dt}`
+}, ve = {
+  // invoked when zoomist instance ready
+  ready: null,
+  // invoked when reset methods be used
+  reset: null,
+  // invoked when image changes it's size
+  resize: null,
+  // invoked before destroy methods be used
+  beforeDestroy: null,
+  // invoked after destroy methods be used
+  destroy: null,
+  // invoked before update methods be used
+  beforeUpdate: null,
+  // invoked when update methods be used
+  update: null,
+  // invoked when image is zooming
+  zoom: null,
+  // invoked when wheeling
+  wheel: null,
+  // invoked when mousedown on wrapper
+  dragStart: null,
+  // invoked when dragging the image
+  drag: null,
+  // invoked when mouseup on wrapper
+  dragEnd: null,
+  // invoked when mousedown on wrapper
+  pinchStart: null,
+  // invoked when pinching the image
+  pinch: null,
+  // invoked when mouseup on wrapper
+  pinchEnd: null,
+  // invoked when mousedown on slider
+  slideStart: null,
+  // invoked when sliding the slider
+  slide: null,
+  // invoked when mouseup on slider
+  slideEnd: null
+}, _e = {
+  // slider options
+  slider: null,
+  // zoomer options
+  zoomer: null
+}, be = `
+<svg viewBox="0 0 12 12" class="${ct}">
+  <polygon points="12,5.5 6.5,5.5 6.5,0 5.5,0 5.5,5.5 0,5.5 0,6.5 5.5,6.5 5.5,12 6.5,12 6.5,6.5 12,6.5 "/>
+</svg>
+`, we = `
+<svg viewBox="0 0 12 12" class="${ct}">
+  <rect y="5.5" width="12" height="1"/>
+</svg>
+`, ye = `
+<svg viewBox="0 0 12 12" class="${ct}">
+  <path d="m7.45,1.27l.35-.22c.26-.17.34-.52.17-.78-.17-.27-.52-.34-.78-.17l-1.54.99-.19.13-.11.46,1.12,1.75c.11.17.29.26.48.26.1,0,.21-.03.31-.09.26-.17.34-.52.17-.78l-.29-.46c1.85.5,3.22,2.17,3.22,4.18,0,2.39-1.95,4.34-4.34,4.34S1.66,8.92,1.66,6.52c0-1.15.44-2.23,1.25-3.05.22-.22.22-.58,0-.8-.22-.22-.58-.22-.8,0-1.02,1.03-1.58,2.4-1.58,3.85,0,3.02,2.46,5.48,5.48,5.48s5.48-2.46,5.48-5.48c0-2.51-1.71-4.62-4.02-5.26Z"/>
+</svg>
+`, Ye = {
+  on(t, e) {
+    if (!e || !vt(e))
+      return this;
+    const { __events__: s } = this;
+    return t.split(" ").forEach((i) => {
+      const n = i;
+      s[n] || (s[n] = []), s[n].push(e);
+    }), this;
+  },
+  emit(t, ...e) {
+    const { __events__: s } = this;
+    return s[t] ? (s[t].forEach((i) => {
+      vt(i) && i.apply(this, e);
+    }), this) : this;
+  },
+  zoom(t, e) {
+    const { scale: s } = this.transform, i = this.useFixedRatio(X(s * (t + 1)));
+    return s === i ? this : (this.zoomTo(i, e), this);
+  },
+  zoomTo(t, e = !0) {
+    const {
+      image: s,
+      transform: { scale: i, translateX: n, translateY: o },
+      options: { bounds: a }
+    } = this;
+    if (t = this.useFixedRatio(t), t === i)
+      return this;
+    if (this.transform.scale = t, !e)
+      return this.emit("zoom", this, this.transform.scale), this;
+    e = typeof e == "boolean" ? this.getContainerCenterClient() : e;
+    const { clientX: h, clientY: l } = e, { top: d, left: u, width: r, height: m } = z(s), { width: f, height: p } = this.getImageDiff(), b = t / i - 1, c = (r / 2 - h + u) * b + n, v = (m / 2 - l + d) * b + o, S = a ? D(c, f, -f) : c, w = a ? D(v, p, -p) : v;
+    return _(this.transform, {
+      translateX: S,
+      translateY: w
+    }), this.emit("zoom", this, this.transform.scale), this;
+  },
+  move(t) {
+    const {
+      options: { bounds: e },
+      transform: { translateX: s, translateY: i }
+    } = this, { x: n, y: o } = t, { width: a, height: h } = this.getImageDiff();
+    if (B(n)) {
+      const l = s + n, d = e ? D(l, a, -a) : l;
+      this.transform.translateX = d;
+    }
+    if (B(o)) {
+      const l = i + o, d = e ? D(l, h, -h) : l;
+      this.transform.translateY = d;
+    }
+    return this;
+  },
+  moveTo(t) {
+    const {
+      options: { bounds: e }
+    } = this, { x: s, y: i } = t, { width: n, height: o } = this.getImageDiff();
+    if (B(s)) {
+      const a = Number(s), h = e ? D(a, n, -n) : a;
+      this.transform.translateX = h;
+    }
+    if (B(i)) {
+      const a = Number(i), h = e ? D(a, o, -o) : a;
+      this.transform.translateY = h;
+    }
+    if (ce.some((a) => a === s)) {
+      const a = {
+        left: -n,
+        right: n,
+        center: 0
+      }[s];
+      this.transform.translateX = a;
+    }
+    if (me.some((a) => a === i)) {
+      const a = {
+        top: -o,
+        bottom: o,
+        center: 0
+      }[i];
+      this.transform.translateY = a;
+    }
+    return this;
+  },
+  slideTo(t) {
+    const {
+      options: { minScale: e, maxScale: s }
+    } = this, i = (s - e) * t / 100 + e;
+    return this.zoomTo(i), this;
+  },
+  reset() {
+    const {
+      options: { initScale: t }
+    } = this;
+    return _(this.transform, {
+      scale: t,
+      translateX: 0,
+      translateY: 0
+    }), this.emit("reset", this), this;
+  },
+  destroy(t = !1) {
+    const { element: e, image: s, controller: i } = this;
+    return this.mounted && (this.emit("beforeDestroy", this), i.abort(), this.destroyModules(), t && s && (this.reset(), s.removeAttribute("style")), e[g] = null, this.mounted = !1, this.emit("destroy", this)), null;
+  },
+  update(t) {
+    const { element: e, controller: s } = this;
+    return this.emit("beforeUpdate", this), e[g] = null, this.mounted = !1, s.abort(), this.destroyModules(), t && (this.options = Object.assign({}, It, kt(t) && t)), this.init(), this.emit("update", this), this;
+  },
+  getImageData() {
+    return { ...this.data.imageData };
+  },
+  getContainerData() {
+    return { ...this.data.containerData };
+  },
+  getSliderValue() {
+    const {
+      __modules__: { slider: t }
+    } = this;
+    return t && t.value !== void 0 ? t.value : null;
+  },
+  isOnBoundTop() {
+    const {
+      options: { bounds: t }
+    } = this;
+    if (!t)
+      return !1;
+    const {
+      transform: { translateY: e }
+    } = this, { height: s } = this.getImageDiff();
+    return e * -1 === X(s);
+  },
+  isOnBoundBottom() {
+    const {
+      options: { bounds: t }
+    } = this;
+    if (!t)
+      return !1;
+    const {
+      transform: { translateY: e }
+    } = this, { height: s } = this.getImageDiff();
+    return e === X(s);
+  },
+  isOnBoundLeft() {
+    const {
+      options: { bounds: t }
+    } = this;
+    if (!t)
+      return !1;
+    const {
+      transform: { translateX: e }
+    } = this, { width: s } = this.getImageDiff();
+    return e * -1 === X(s);
+  },
+  isOnBoundRight() {
+    const {
+      options: { bounds: t }
+    } = this;
+    if (!t)
+      return !1;
+    const {
+      transform: { translateX: e }
+    } = this, { width: s } = this.getImageDiff();
+    return e === X(s);
+  },
+  isOnBoundX() {
+    const {
+      options: { bounds: t }
+    } = this;
+    if (!t)
+      return !1;
+    const {
+      transform: { translateX: e }
+    } = this, { width: s } = this.getImageDiff();
+    return Math.abs(e) === Math.abs(X(s));
+  },
+  isOnBoundY() {
+    const {
+      options: { bounds: t }
+    } = this;
+    if (!t)
+      return !1;
+    const {
+      transform: { translateY: e }
+    } = this, { height: s } = this.getImageDiff();
+    return Math.abs(e) === Math.abs(X(s));
+  },
+  isOnMinScale() {
+    const {
+      options: { minScale: t }
+    } = this, {
+      transform: { scale: e }
+    } = this;
+    return e === t;
+  },
+  isOnMaxScale() {
+    const {
+      options: { maxScale: t }
+    } = this, {
+      transform: { scale: e }
+    } = this;
+    return e === t;
+  },
+  // private methods
+  getImageDiff() {
+    const { width: t, height: e } = this.getContainerData(), { width: s, height: i } = this.getImageData();
+    return {
+      width: (t - s) / 2,
+      height: (e - i) / 2
+    };
+  },
+  // private methods
+  getContainerCenterClient() {
+    const { element: t } = this, { top: e, left: s, width: i, height: n } = z(t);
+    return {
+      clientX: s + i / 2,
+      clientY: e + n / 2
+    };
+  },
+  // private methods
+  getScaleRatio() {
+    const {
+      transform: { scale: t },
+      options: { minScale: e, maxScale: s }
+    } = this;
+    return (t - e) / (s - e);
+  },
+  // private methods
+  useFixedRatio(t) {
+    const {
+      options: { minScale: e, maxScale: s }
+    } = this;
+    return D(t, e, s);
+  },
+  // private methods
+  // animation
+  useAnimate(t) {
+    const {
+      options: { smooth: e },
+      transform: s
+    } = this, i = (1100 - (typeof e == "object" ? Math.max(0.1, Math.min(1, e.damping)) : 0.6) * 1e3) * 0.5, n = () => {
+      if (!this.states.dragging && (Math.abs(t.velocityX) > 0.01 || Math.abs(t.velocityY) > 0.01)) {
+        const o = Date.now(), a = o - t.lastTime, h = Math.exp(-a / i);
+        t.velocityX *= h, t.velocityY *= h, t.lastTime = o;
+        const l = t.velocityX * a, d = t.velocityY * a;
+        if (this.moveTo({
+          x: s.translateX + l,
+          y: s.translateY + d
+        }), Math.abs(t.velocityX) < 0.01 && Math.abs(t.velocityY) < 0.01) {
+          t.frame = null;
+          return;
+        }
+      }
+      t.frame = requestAnimationFrame(n);
+    };
+    return n;
+  }
+}, { defineProperty: A } = Object;
+var K, Bt, Q, zt, tt, Dt, et, xt, st, $t, it, Tt, nt, Ot, ot, Lt, at, Mt, rt, Ct, lt, Rt, ht, Wt;
+class Xe {
+  constructor(e, s) {
+    if (y(this, K), y(this, Q), y(this, tt), y(this, et), y(this, st), y(this, it), y(this, nt), y(this, ot), y(this, at), y(this, rt), y(this, lt), y(this, ht), E(this, "element"), E(this, "options"), E(this, "wrapper"), E(this, "image"), E(this, "mounted"), E(this, "data"), E(this, "transform"), E(this, "states"), E(this, "controller"), E(this, "__events__"), E(this, "__modules__"), !e)
+      return bt("The first argument is required.");
+    const i = U(e);
+    if (!i)
+      return bt(`Element ${e} is not exist.`);
+    this.element = i, this.options = Object.assign({}, It, kt(s) && s), this.init();
+  }
+  // check zoomist-image is exist
+  init() {
+    const { element: e } = this, {
+      options: { bounds: s, minScale: i, maxScale: n, initScale: o }
+    } = this;
+    if (e[g])
+      return;
+    e[g] = this;
+    const a = e.querySelector(`.${wt}`), h = e.querySelector(`.${J}`);
+    if (!a)
+      return G(`${g} needs a ".${wt}" element.`);
+    if (!h)
+      return G(`${g} needs a ".${J}" element.`);
+    this.options.minScale = s && i < 1 ? 1 : i, this.options.maxScale = Math.max(n, i), this.options.initScale = D(o || i, i, n), this.wrapper = a, this.image = h, Y(this, K, Bt).call(this);
+  }
+  // destory modules
+  destroyModules() {
+    const { slider: e, zoomer: s } = this.__modules__;
+    e && this.destroySlider(), s && this.destroyZoomer();
+  }
+  // destroy slider
+  destroySlider() {
+    var e, s;
+    const {
+      __modules__: { slider: i }
+    } = this;
+    if (!i || !i.mounted)
+      return;
+    const {
+      options: { el: n },
+      controller: o
+    } = i;
+    n === `.${W}` ? (e = i.sliderEl) == null || e.remove() : (s = i.sliderTrack) == null || s.remove(), o?.abort(), i.mounted = !1;
+  }
+  // destroy zoomer
+  destroyZoomer() {
+    const {
+      __modules__: { zoomer: e }
+    } = this;
+    if (!e || !e.mounted)
+      return;
+    const {
+      options: { el: s, inEl: i, outEl: n, resetEl: o },
+      controller: a,
+      zoomerEl: h,
+      zoomerInEl: l,
+      zoomerOutEl: d,
+      zoomerResetEl: u
+    } = e, r = (m, f, p) => {
+      m === `.${f}` && p?.remove();
+    };
+    [
+      { target: s, className: j, el: h },
+      { target: i, className: mt, el: l },
+      { target: n, className: ut, el: d },
+      { target: o, className: dt, el: u }
+    ].forEach((m) => r(m.target, m.className, m.el)), a?.abort(), e.mounted = !1;
+  }
+}
+K = /* @__PURE__ */ new WeakSet(), Bt = function() {
+  const { element: t, image: e, options: s } = this, { draggable: i, pinchable: n } = s, { offsetWidth: o, offsetHeight: a } = t, { offsetWidth: h, offsetHeight: l } = e, { width: d, height: u } = z(e);
+  if (!h || !l)
+    return G(`The width or height of ${J} should not be 0.`);
+  if (this.transform = {
+    scale: 0,
+    translateX: 0,
+    translateY: 0
+  }, this.data = {
+    imageData: {
+      originWidth: h,
+      originHeight: l,
+      width: d,
+      height: u
+    },
+    containerData: {
+      width: o,
+      height: a
+    }
+  }, T && (i || n) && (this.data.touchData = {
+    hypot: 0,
+    prevX: 0,
+    prevY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    imageTop: 0,
+    imageLeft: 0,
+    widthDiff: 0,
+    heightDiff: 0,
+    lastTime: 0,
+    velocityX: 0,
+    velocityY: 0,
+    frame: null
+  }), !T && i && (this.data.dragData = {
+    prevX: 0,
+    prevY: 0,
+    lastTime: 0,
+    velocityX: 0,
+    velocityY: 0,
+    frame: null
+  }), this.__events__ = { ...ve }, s.on)
+    for (const [r, m] of Object.entries(s.on))
+      this.__events__[r] = [m];
+  if (this.__modules__ = { ..._e }, s.slider) {
+    const r = s.slider === !0 ? fe : s.slider;
+    this.__modules__.slider = {
+      options: Object.assign({}, de, r)
+    };
+  }
+  if (s.zoomer) {
+    const r = s.zoomer === !0 ? pe : s.zoomer;
+    this.__modules__.zoomer = {
+      options: Object.assign({}, ge, r)
+    };
+  }
+  this.controller = new AbortController(), Y(this, Q, zt).call(this);
+}, Q = /* @__PURE__ */ new WeakSet(), zt = function() {
+  if (this.mounted)
+    return;
+  const {
+    element: t,
+    image: e,
+    options: { minScale: s, maxScale: i, initScale: n },
+    __modules__: { slider: o, zoomer: a }
+  } = this;
+  M(e, {
+    transform: `
+        translate(var(${St}, 0px), var(${Et}, 0px))
+        scale(var(${Xt}, 0))`
+  }), A(this.transform, "scale", {
+    get: () => this.transform.__scale__,
+    set: (h) => {
+      const l = this.useFixedRatio(h);
+      if (!(V(l) || this.transform.__scale__ === l)) {
+        if (this.transform.__scale__ = l, M(e, { [Xt]: l.toString() }), _(this.data.imageData, {
+          width: z(e).width,
+          height: z(e).height
+        }), o) {
+          const d = Math.round(this.getScaleRatio() * 100);
+          o.value = d;
+        }
+        if (a && a.options.disabledClass) {
+          const {
+            zoomerInEl: d,
+            zoomerOutEl: u,
+            zoomerResetEl: r,
+            options: { disabledClass: m }
+          } = a;
+          d && (d.classList[l === i ? "add" : "remove"](m), R(d, { "aria-disabled": l === i ? "true" : "false" })), u && (u.classList[l === s ? "add" : "remove"](m), R(u, { "aria-disabled": l === s ? "true" : "false" })), r && (r.classList[l === n ? "add" : "remove"](m), R(r, { "aria-disabled": l === n ? "true" : "false" }));
+        }
+      }
+    }
+  }), A(this.transform, "translateX", {
+    get: () => this.transform.__translateX__,
+    set: (h) => {
+      const l = X(h);
+      V(l) || this.transform.__translateX__ === l || (this.transform.__translateX__ = l, M(e, { [St]: `${l}px` }));
+    }
+  }), A(this.transform, "translateY", {
+    get: () => this.transform.__translateY__,
+    set: (h) => {
+      const l = X(h);
+      V(l) || this.transform.__translateY__ === l || (this.transform.__translateY__ = l, M(e, { [Et]: `${l}px` }));
+    }
+  }), Y(this, tt, Dt).call(this), Y(this, ot, Lt).call(this), _(this.transform, {
+    scale: n,
+    translateX: 0,
+    translateY: 0
+  }), t.classList.add(Ut), this.mounted = !0, this.emit("ready", this);
+}, tt = /* @__PURE__ */ new WeakSet(), Dt = function() {
+  const {
+    wrapper: t,
+    options: e,
+    controller: { signal: s }
+  } = this, { draggable: i, pinchable: n, wheelable: o } = e;
+  if (this.states = {}, o) {
+    this.states.wheeling = !1;
+    const a = (h) => Y(this, et, xt).call(this, h);
+    t.addEventListener(he, a, { signal: s });
+  }
+  if (T && (i || n)) {
+    i && (this.states.dragging = !1), n && (this.states.pinching = !1);
+    const a = (h) => Y(this, it, Tt).call(this, h);
+    t.addEventListener("touchstart", a, { signal: s });
+  }
+  if (!T && i) {
+    this.states.dragging = !1;
+    const a = (h) => Y(this, st, $t).call(this, h);
+    t.addEventListener("mousedown", a, { signal: s });
+  }
+  Y(this, nt, Ot).call(this);
+}, et = /* @__PURE__ */ new WeakSet(), xt = function(t) {
+  const {
+    options: { zoomRatio: e, wheelReleaseOnMinMax: s, disableWheelingClass: i }
+  } = this, n = (t.deltaY || t.detail) > 0 ? -1 : 1;
+  if (s) {
+    const o = this.isOnMinScale(), a = this.isOnMaxScale();
+    o && n === -1 || a && n === 1 || t.preventDefault();
+  } else
+    t.preventDefault();
+  this.states.wheeling || Z(t.target, i) || (this.states.wheeling = !0, setTimeout(() => {
+    this.states.wheeling = !1;
+  }, 30), this.zoom(n * e, x(t)), this.emit("wheel", this, this.transform.scale, t));
+}, st = /* @__PURE__ */ new WeakSet(), $t = function(t) {
+  const {
+    data: e,
+    transform: s,
+    options: { disableDraggingClass: i, smooth: n }
+  } = this, { dragData: o, imageData: a } = e;
+  if (!o || !a)
+    return;
+  const h = (u) => {
+    if (u && u.button !== 0 || (u.preventDefault(), Z(u.target, i)))
+      return;
+    o.frame !== null && cancelAnimationFrame(o.frame);
+    const r = Date.now(), { clientX: m, clientY: f } = x(u);
+    if (_(o, {
+      prevX: m,
+      prevY: f,
+      lastTime: r,
+      velocityX: 0,
+      velocityY: 0,
+      frame: null
+    }), this.states.dragging = !0, n) {
+      const p = this.useAnimate(o);
+      o.frame = requestAnimationFrame(p);
+    }
+    this.emit("dragStart", this, { x: s.translateX, y: s.translateY }, u), document.addEventListener("mousemove", l), document.addEventListener("mouseup", d);
+  }, l = (u) => {
+    if (u.touches || !this.states.dragging)
+      return;
+    u.preventDefault();
+    const r = Date.now(), { clientX: m, clientY: f } = x(u), p = m - o.prevX, b = f - o.prevY, c = r - o.lastTime, v = s.translateX + p, S = s.translateY + b;
+    this.moveTo({ x: v, y: S }), n && c > 0 && (o.velocityX = 0.8 * (p / c) + 0.2 * o.velocityX, o.velocityY = 0.8 * (b / c) + 0.2 * o.velocityY), _(o, {
+      prevX: m,
+      prevY: f,
+      lastTime: r
+    }), this.emit("drag", this, { x: v, y: S }, u);
+  }, d = (u) => {
+    u.touches || (this.states.dragging = !1, this.emit("dragEnd", this, { x: s.translateX, y: s.translateY }, u), document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", d));
+  };
+  h(t);
+}, it = /* @__PURE__ */ new WeakSet(), Tt = function(t) {
+  const {
+    data: e,
+    transform: s,
+    options: { maxScale: i, minScale: n, draggable: o, pinchable: a, bounds: h, dragReleaseOnBounds: l, disableDraggingClass: d, smooth: u }
+  } = this, { touchData: r, imageData: m } = e;
+  if (!r || !m)
+    return;
+  const f = (c) => {
+    if (!c.touches)
+      return;
+    if (h && l) {
+      const O = this.isOnBoundX(), L = this.isOnBoundY();
+      c.touches.length === 1 && (O || L) || c.preventDefault();
+    } else
+      c.preventDefault();
+    if (Z(c.target, d) && c.touches.length <= 1)
+      return;
+    r.frame !== null && cancelAnimationFrame(r.frame);
+    const v = Date.now(), { top: S, left: w } = z(this.image), { width: $, height: N } = this.getImageDiff(), { clientX: k, clientY: I } = x(c);
+    if (_(r, {
+      hypot: _t(c),
+      prevX: k,
+      prevY: I,
+      offsetX: 0,
+      offsetY: 0,
+      imageTop: S,
+      imageLeft: w,
+      widthDiff: $,
+      heightDiff: N,
+      lastTime: v,
+      velocityX: 0,
+      velocityY: 0,
+      frame: null
+    }), o) {
+      if (this.states.dragging = !0, u) {
+        const O = this.useAnimate(r);
+        r.frame = requestAnimationFrame(O);
+      }
+      this.emit("dragStart", this, { x: s.translateX, y: s.translateY }, c);
+    }
+    a && c.touches.length === 2 && (this.states.pinching = !0, this.emit("pinchStart", this, s.scale, c)), document.addEventListener("touchmove", p), document.addEventListener("touchend", b);
+  }, p = (c) => {
+    if (!c.touches)
+      return;
+    const v = Date.now(), {
+      states: { dragging: S, pinching: w }
+    } = this, { top: $, left: N } = z(this.image), { width: k, height: I } = this.getImageDiff(), O = w && c.touches.length !== 2 || !w && c.touches.length === 2, L = _t(c), gt = L ? L / r.hypot : 1, F = this.useFixedRatio(gt * s.scale), { clientX: H, clientY: q } = x(c), At = H + r.offsetX, jt = q + r.offsetY;
+    if (a && c.touches.length === 2 && (w || (this.states.pinching = !0, this.emit("pinchStart", this, s.scale, c)), this.zoomTo(F, !1)), S) {
+      O && (r.velocityX = 0, r.velocityY = 0);
+      const pt = F !== i && F !== n && a && c.touches.length === 2 ? gt : 1, Nt = X(
+        At - r.imageLeft - (k - r.widthDiff) - (r.prevX - r.imageLeft) * pt + s.translateX
+      ), Ft = X(
+        jt - r.imageTop - (I - r.heightDiff) - (r.prevY - r.imageTop) * pt + s.translateY
+      );
+      if (this.moveTo({ x: Nt, y: Ft }), u && c.touches.length === 1 && !O) {
+        const P = v - r.lastTime;
+        if (P > 0) {
+          const Ht = H - r.prevX, qt = q - r.prevY;
+          r.velocityX = 0.8 * (Ht / P) + 0.2 * r.velocityX, r.velocityY = 0.8 * (qt / P) + 0.2 * r.velocityY;
+        }
+      }
+    }
+    _(r, {
+      hypot: L,
+      prevX: H,
+      prevY: q,
+      imageTop: $,
+      imageLeft: N,
+      widthDiff: k,
+      heightDiff: I,
+      lastTime: v
+    }), w && c.touches.length === 2 && this.emit("pinch", this, s.scale, c), S && this.emit("drag", this, { x: s.translateX, y: s.translateY }, c);
+  }, b = (c) => {
+    if (!c.touches)
+      return;
+    const {
+      states: { dragging: v, pinching: S }
+    } = this;
+    if (S && c.touches.length === 1) {
+      this.states.pinching = !1;
+      const { clientX: w, clientY: $ } = x(c);
+      _(r, {
+        prevX: w,
+        prevY: $,
+        velocityX: 0,
+        velocityY: 0,
+        lastTime: Date.now()
+      }), this.emit("pinchEnd", this, s.scale, c);
+    }
+    if (v && !c.touches.length && (this.states.dragging = !1, this.emit("dragEnd", this, { x: s.translateX, y: s.translateY }, c)), v && c.touches.length === 1) {
+      const { clientX: w, clientY: $ } = x(c);
+      _(r, {
+        offsetX: r.prevX - w,
+        offsetY: r.prevY - $
+      });
+    }
+    c.touches.length || (document.removeEventListener("touchmove", p), document.removeEventListener("touchend", b));
+  };
+  f(t);
+}, nt = /* @__PURE__ */ new WeakSet(), Ot = function() {
+  const { element: t, image: e, transform: s } = this;
+  new ResizeObserver(() => {
+    const { offsetWidth: i, offsetHeight: n } = t, { width: o, height: a } = this.getContainerData();
+    if (i === o && n === a)
+      return;
+    const h = s.translateX, l = s.translateY;
+    if (h) {
+      const f = i / o * h;
+      this.transform.translateX = f;
+    }
+    if (l) {
+      const f = n / a * l;
+      this.transform.translateY = f;
+    }
+    const { offsetWidth: d, offsetHeight: u } = e, { width: r, height: m } = z(e);
+    _(this.data.containerData, {
+      width: i,
+      height: n
+    }), _(this.data.imageData, {
+      originWidth: d,
+      originHeight: u,
+      width: r,
+      height: m
+    }), this.emit("resize", this);
+  }).observe(t);
+}, ot = /* @__PURE__ */ new WeakSet(), Lt = function() {
+  const { slider: t, zoomer: e } = this.__modules__;
+  t && Y(this, at, Mt).call(this), e && Y(this, lt, Rt).call(this);
+}, at = /* @__PURE__ */ new WeakSet(), Mt = function() {
+  const {
+    element: t,
+    __modules__: { slider: e }
+  } = this;
+  if (!e || e.mounted)
+    return;
+  const {
+    options: { el: s, direction: i }
+  } = e;
+  if (!s)
+    return;
+  const n = s === `.${W}`, o = n ? C("div", W) : U(s);
+  if (!o)
+    return;
+  const a = C("div", Kt), h = C("span", Qt), l = C("span", te, {
+    ...ie,
+    "aria-orientation": i
+  });
+  o.classList.add(`${W}-${i}`), A(e, "value", {
+    get() {
+      return e.__value__;
+    },
+    set(d) {
+      e.__value__ !== d && (e.__value__ = d, M(o, { [ue]: d.toString() }), R(l, { "aria-valuenow": d.toString() }));
+    }
+  }), _(e, {
+    value: this.getScaleRatio() * 100,
+    controller: new AbortController(),
+    sliding: !1,
+    sliderEl: o,
+    sliderTrack: a,
+    sliderButton: l
+  }), Y(this, rt, Ct).call(this), a.append(h, l), o.append(a), n && t.append(o), e.mounted = !0;
+}, rt = /* @__PURE__ */ new WeakSet(), Ct = function() {
+  const {
+    options: { minScale: t, maxScale: e },
+    __modules__: { slider: s }
+  } = this;
+  if (!s)
+    return;
+  const {
+    options: { direction: i },
+    controller: n,
+    sliderEl: o,
+    sliderTrack: a
+  } = s;
+  if (!o || !a)
+    return;
+  const h = i === "vertical", l = (m) => {
+    const f = z(a), p = f[h ? "height" : "width"], b = f[h ? "bottom" : "left"], c = x(m)[h ? "clientY" : "clientX"], v = X(D((c - b) * (h ? -1 : 1) / p, 0, 1));
+    return (e - t) * v + t;
+  }, d = (m) => {
+    if (m instanceof MouseEvent && m.button !== 0)
+      return;
+    s.sliding = !0;
+    const f = l(m);
+    this.zoomTo(f), this.emit("slideStart", this, this.getSliderValue(), m), document.addEventListener(yt, u), document.addEventListener(Yt, r);
+  }, u = (m) => {
+    if (!s.sliding)
+      return;
+    const f = l(m);
+    this.zoomTo(f), this.emit("slide", this, this.getSliderValue(), m);
+  }, r = (m) => {
+    this.emit("slideEnd", this, this.getSliderValue(), m), s.sliding = !1, document.removeEventListener(yt, u), document.removeEventListener(Yt, r);
+  };
+  o.addEventListener(le, d, { signal: n?.signal });
+}, lt = /* @__PURE__ */ new WeakSet(), Rt = function() {
+  const {
+    element: t,
+    __modules__: { zoomer: e }
+  } = this;
+  if (!e || e.mounted)
+    return;
+  const {
+    options: { el: s, inEl: i, outEl: n, resetEl: o }
+  } = e, a = [i, n, o], h = (m, f, p, b, c) => {
+    if (!m)
+      return null;
+    const v = m === `.${p}`;
+    return p = a.includes(m) ? `${p} ${ee}` : p, v ? C(f, p, b, c) : U(m);
+  }, l = h(s, "div", j), d = h(i, "button", mt, ne, be), u = h(n, "button", ut, oe, we), r = h(o, "button", dt, ae, ye);
+  _(e, {
+    controller: new AbortController(),
+    zoomerEl: l,
+    zoomerInEl: d,
+    zoomerOutEl: u,
+    zoomerResetEl: r
+  }), l && (d && l.append(d), u && l.append(u), r && l.append(r), s === `.${j}` && t.append(l)), Y(this, ht, Wt).call(this), e.mounted = !0;
+}, ht = /* @__PURE__ */ new WeakSet(), Wt = function() {
+  const {
+    options: { zoomRatio: t },
+    __modules__: { zoomer: e }
+  } = this, s = this;
+  if (!e)
+    return;
+  const { controller: i, zoomerInEl: n, zoomerOutEl: o, zoomerResetEl: a } = e;
+  n && n.addEventListener(
+    "click",
+    () => {
+      s.zoom(t);
+    },
+    { signal: i?.signal }
+  ), o && o.addEventListener(
+    "click",
+    () => {
+      s.zoom(-t);
+    },
+    { signal: i?.signal }
+  ), a && a.addEventListener(
+    "click",
+    () => {
+      s.reset();
+    },
+    { signal: i?.signal }
+  );
+};
+Object.assign(Xe.prototype, Ye);
+export {
+  Xe as default
+};