vue-cropperjs2 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,1633 +0,0 @@
-import { defineComponent as D, useTemplateRef as ie, h as _, openBlock as W, createBlock as X, resolveDynamicComponent as H, unref as Y, withCtx as Ft, renderSlot as qt } from "vue";
-const at = typeof window < "u" && typeof window.document < "u", R = at ? window : {}, bt = at ? "ontouchstart" in R.document.documentElement : !1, Ct = at ? "PointerEvent" in R : !1, B = "cropper", J = `${B}-canvas`, ne = `${B}-crosshair`, ae = `${B}-grid`, oe = `${B}-handle`, ot = `${B}-image`, z = `${B}-selection`, re = `${B}-shade`, he = `${B}-viewer`, st = "select", Vt = "move", Z = "scale", mt = "rotate", it = "transform", P = "none", yt = "n-resize", Et = "e-resize", wt = "s-resize", St = "w-resize", G = "ne-resize", F = "nw-resize", q = "se-resize", V = "sw-resize", ce = "action", le = bt ? "touchend touchcancel" : "mouseup", de = bt ? "touchmove" : "mousemove", ue = bt ? "touchstart" : "mousedown", At = Ct ? "pointerdown" : ue, Tt = Ct ? "pointermove" : de, kt = Ct ? "pointerup pointercancel" : le, xt = "error", Ot = "keydown", j = "load", Nt = "wheel", K = "action", L = "actionend", fe = "actionmove", U = "actionstart", M = "change", pt = "transform";
-function $e(o) {
-  return typeof o == "string";
-}
-const Jt = Number.isNaN || R.isNaN;
-function f(o) {
-  return typeof o == "number" && !Jt(o);
-}
-function T(o) {
-  return f(o) && o > 0 && o < 1 / 0;
-}
-function ge(o) {
-  return typeof o > "u";
-}
-function Qt(o) {
-  return typeof o == "object" && o !== null;
-}
-const { hasOwnProperty: me } = Object.prototype;
-function nt(o) {
-  if (!Qt(o))
-    return !1;
-  try {
-    const { constructor: t } = o, { prototype: e } = t;
-    return t && e && me.call(e, "isPrototypeOf");
-  } catch {
-    return !1;
-  }
-}
-function vt(o) {
-  return typeof o == "function";
-}
-function te(o) {
-  return typeof o == "object" && o !== null && o.nodeType === 1;
-}
-const pe = /([a-z\d])([A-Z])/g;
-function Rt(o) {
-  return String(o).replace(pe, "$1-$2").toLowerCase();
-}
-const be = /-[A-z\d]/g;
-function It(o) {
-  return o.replace(be, (t) => t.slice(1).toUpperCase());
-}
-const ee = /\s\s*/;
-function v(o, t, e, s) {
-  t.trim().split(ee).forEach((i) => {
-    o.removeEventListener(i, e, s);
-  });
-}
-function y(o, t, e, s) {
-  t.trim().split(ee).forEach((i) => {
-    o.addEventListener(i, e, s);
-  });
-}
-function Pt(o, t, e, s) {
-  y(o, t, e, Object.assign(Object.assign({}, s), { once: !0 }));
-}
-const Ce = {
-  bubbles: !0,
-  cancelable: !0,
-  composed: !0
-};
-function ve(o, t, e, s) {
-  return o.dispatchEvent(new CustomEvent(t, Object.assign(Object.assign(Object.assign({}, Ce), { detail: e }), s)));
-}
-const zt = Promise.resolve();
-function ye(o, t) {
-  return t ? zt.then(o ? t.bind(o) : t) : zt;
-}
-function Mt(o) {
-  const { documentElement: t } = o.ownerDocument, e = o.getBoundingClientRect();
-  return {
-    left: e.left + (R.pageXOffset - t.clientLeft),
-    top: e.top + (R.pageYOffset - t.clientTop)
-  };
-}
-const Ee = /deg|g?rad|turn$/i;
-function gt(o) {
-  const t = parseFloat(o) || 0;
-  if (t !== 0) {
-    const [e = "rad"] = String(o).match(Ee) || [];
-    switch (e.toLowerCase()) {
-      case "deg":
-        return t / 360 * (Math.PI * 2);
-      case "grad":
-        return t / 400 * (Math.PI * 2);
-      case "turn":
-        return t * (Math.PI * 2);
-    }
-  }
-  return t;
-}
-const Dt = "contain", we = "cover";
-function et(o, t = Dt) {
-  const { aspectRatio: e } = o;
-  let { width: s, height: i } = o;
-  const n = T(s), r = T(i);
-  if (n && r) {
-    const a = i * e;
-    t === Dt && a > s || t === we && a < s ? i = s / e : s = i * e;
-  } else n ? i = s / e : r && (s = i * e);
-  return {
-    width: s,
-    height: i
-  };
-}
-function se(o, ...t) {
-  if (t.length === 0)
-    return o;
-  const [e, s, i, n, r, a] = o, [l, c, h, u, $, g] = t[0];
-  return o = [
-    e * l + i * c,
-    s * l + n * c,
-    e * h + i * u,
-    s * h + n * u,
-    e * $ + i * g + r,
-    s * $ + n * g + a
-  ], se(o, ...t.slice(1));
-}
-var Se = ":host([hidden]){display:none!important}";
-const Ae = /left|top|width|height/i, _t = "open", Q = /* @__PURE__ */ new WeakMap(), tt = /* @__PURE__ */ new WeakMap(), Wt = /* @__PURE__ */ new Map(), Xt = R.document && Array.isArray(R.document.adoptedStyleSheets) && "replaceSync" in R.CSSStyleSheet.prototype;
-class I extends HTMLElement {
-  get $sharedStyle() {
-    return `${this.themeColor ? `:host{--theme-color: ${this.themeColor};}` : ""}${Se}`;
-  }
-  constructor() {
-    var t, e;
-    super(), this.shadowRootMode = _t, this.slottable = !0;
-    const s = (e = (t = Object.getPrototypeOf(this)) === null || t === void 0 ? void 0 : t.constructor) === null || e === void 0 ? void 0 : e.$name;
-    s && Wt.set(s, this.tagName.toLowerCase());
-  }
-  static get observedAttributes() {
-    return [
-      "shadow-root-mode",
-      "slottable",
-      "theme-color"
-    ];
-  }
-  // Convert attribute to property
-  attributeChangedCallback(t, e, s) {
-    if (Object.is(s, e))
-      return;
-    const i = It(t), n = this[i];
-    let r = s;
-    switch (typeof n) {
-      case "boolean":
-        r = s !== null && s !== "false";
-        break;
-      case "number":
-        r = Number(s);
-        break;
-    }
-    switch (this[i] = r, t) {
-      case "theme-color": {
-        const a = tt.get(this), l = this.$sharedStyle;
-        a && l && (Xt ? a.replaceSync(l) : a.textContent = l);
-        break;
-      }
-    }
-  }
-  // Convert property to attribute
-  $propertyChangedCallback(t, e, s) {
-    if (!Object.is(s, e))
-      switch (t = Rt(t), typeof s) {
-        case "boolean":
-          s === !0 ? this.hasAttribute(t) || this.setAttribute(t, "") : this.removeAttribute(t);
-          break;
-        case "number":
-          Jt(s) ? s = "" : s = String(s);
-        // Fall through
-        // case 'string':
-        // eslint-disable-next-line no-fallthrough
-        default:
-          s ? this.getAttribute(t) !== s && this.setAttribute(t, s) : this.removeAttribute(t);
-      }
-  }
-  connectedCallback() {
-    Object.getPrototypeOf(this).constructor.observedAttributes.forEach((e) => {
-      const s = It(e);
-      let i = this[s];
-      ge(i) || this.$propertyChangedCallback(s, void 0, i), Object.defineProperty(this, s, {
-        enumerable: !0,
-        configurable: !0,
-        get() {
-          return i;
-        },
-        set(n) {
-          const r = i;
-          i = n, this.$propertyChangedCallback(s, r, n);
-        }
-      });
-    });
-    const t = this.attachShadow({
-      mode: this.shadowRootMode || _t
-    });
-    if (this.shadowRoot || Q.set(this, t), tt.set(this, this.$addStyles(this.$sharedStyle)), this.$style && this.$addStyles(this.$style), this.$template) {
-      const e = document.createElement("template");
-      e.innerHTML = this.$template, t.appendChild(e.content);
-    }
-    if (this.slottable) {
-      const e = document.createElement("slot");
-      t.appendChild(e);
-    }
-  }
-  disconnectedCallback() {
-    tt.has(this) && tt.delete(this), Q.has(this) && Q.delete(this);
-  }
-  // eslint-disable-next-line class-methods-use-this
-  $getTagNameOf(t) {
-    var e;
-    return (e = Wt.get(t)) !== null && e !== void 0 ? e : t;
-  }
-  $setStyles(t) {
-    return Object.keys(t).forEach((e) => {
-      let s = t[e];
-      f(s) && (s !== 0 && Ae.test(e) ? s = `${s}px` : s = String(s)), this.style[e] = s;
-    }), this;
-  }
-  /**
-   * Outputs the shadow root of the element.
-   * @returns {ShadowRoot} Returns the shadow root.
-   */
-  $getShadowRoot() {
-    return this.shadowRoot || Q.get(this);
-  }
-  /**
-   * Adds styles to the shadow root.
-   * @param {string} styles The styles to add.
-   * @returns {CSSStyleSheet|HTMLStyleElement} Returns the generated style sheet.
-   */
-  $addStyles(t) {
-    let e;
-    const s = this.$getShadowRoot();
-    return Xt ? (e = new CSSStyleSheet(), e.replaceSync(t), s.adoptedStyleSheets = s.adoptedStyleSheets.concat(e)) : (e = document.createElement("style"), e.textContent = t, s.appendChild(e)), e;
-  }
-  /**
-   * Dispatches an event at the element.
-   * @param {string} type The name of the event.
-   * @param {*} [detail] The data passed when initializing the event.
-   * @param {CustomEventInit} [options] The other event options.
-   * @returns {boolean} Returns the result value.
-   */
-  $emit(t, e, s) {
-    return ve(this, t, e, s);
-  }
-  /**
-   * Defers the callback to be executed after the next DOM update cycle.
-   * @param {Function} [callback] The callback to execute after the next DOM update cycle.
-   * @returns {Promise} A promise that resolves to nothing.
-   */
-  $nextTick(t) {
-    return ye(this, t);
-  }
-  /**
-   * Defines the constructor as a new custom element.
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define}
-   * @param {string|object} [name] The element name.
-   * @param {object} [options] The element definition options.
-   */
-  static $define(t, e) {
-    Qt(t) && (e = t, t = ""), t || (t = this.$name || this.name), t = Rt(t), at && R.customElements && !R.customElements.get(t) && customElements.define(t, this, e);
-  }
-}
-I.$version = "2.0.0-rc.2";
-var Te = ':host{display:block;min-height:100px;min-width:200px;overflow:hidden;position:relative;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([background]){background-color:#fff;background-image:repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc),repeating-linear-gradient(45deg,#ccc 25%,transparent 0,transparent 75%,#ccc 0,#ccc);background-image:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%);background-position:0 0,.5rem .5rem;background-size:1rem 1rem}:host([disabled]){pointer-events:none}:host([disabled]):after{bottom:0;content:"";cursor:not-allowed;display:block;left:0;pointer-events:none;position:absolute;right:0;top:0}';
-class rt extends I {
-  constructor() {
-    super(...arguments), this.$onPointerDown = null, this.$onPointerMove = null, this.$onPointerUp = null, this.$onWheel = null, this.$wheeling = !1, this.$pointers = /* @__PURE__ */ new Map(), this.$style = Te, this.$action = P, this.background = !1, this.disabled = !1, this.scaleStep = 0.1, this.themeColor = "#39f";
-  }
-  static get observedAttributes() {
-    return super.observedAttributes.concat([
-      "background",
-      "disabled",
-      "scale-step"
-    ]);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.disabled || this.$bind();
-  }
-  disconnectedCallback() {
-    this.disabled || this.$unbind(), super.disconnectedCallback();
-  }
-  $propertyChangedCallback(t, e, s) {
-    if (!Object.is(s, e))
-      switch (super.$propertyChangedCallback(t, e, s), t) {
-        case "disabled":
-          s ? this.$unbind() : this.$bind();
-          break;
-      }
-  }
-  $bind() {
-    this.$onPointerDown || (this.$onPointerDown = this.$handlePointerDown.bind(this), y(this, At, this.$onPointerDown)), this.$onPointerMove || (this.$onPointerMove = this.$handlePointerMove.bind(this), y(this.ownerDocument, Tt, this.$onPointerMove)), this.$onPointerUp || (this.$onPointerUp = this.$handlePointerUp.bind(this), y(this.ownerDocument, kt, this.$onPointerUp)), this.$onWheel || (this.$onWheel = this.$handleWheel.bind(this), y(this, Nt, this.$onWheel, {
-      passive: !1,
-      capture: !0
-    }));
-  }
-  $unbind() {
-    this.$onPointerDown && (v(this, At, this.$onPointerDown), this.$onPointerDown = null), this.$onPointerMove && (v(this.ownerDocument, Tt, this.$onPointerMove), this.$onPointerMove = null), this.$onPointerUp && (v(this.ownerDocument, kt, this.$onPointerUp), this.$onPointerUp = null), this.$onWheel && (v(this, Nt, this.$onWheel, {
-      capture: !0
-    }), this.$onWheel = null);
-  }
-  $handlePointerDown(t) {
-    const { buttons: e, button: s, type: i } = t;
-    if (this.disabled || // Handle pointer or mouse event, and ignore touch event
-    (i === "pointerdown" && t.pointerType === "mouse" || i === "mousedown") && // No primary button (Usually the left button)
-    (f(e) && e !== 1 || f(s) && s !== 0 || t.ctrlKey))
-      return;
-    const { $pointers: n } = this;
-    let r = "";
-    if (t.changedTouches)
-      Array.from(t.changedTouches).forEach(({ identifier: a, pageX: l, pageY: c }) => {
-        n.set(a, {
-          startX: l,
-          startY: c,
-          endX: l,
-          endY: c
-        });
-      });
-    else {
-      const { pointerId: a = 0, pageX: l, pageY: c } = t;
-      n.set(a, {
-        startX: l,
-        startY: c,
-        endX: l,
-        endY: c
-      });
-    }
-    n.size > 1 ? r = it : te(t.target) && (r = t.target.action || t.target.getAttribute(ce) || ""), this.$emit(U, {
-      action: r,
-      relatedEvent: t
-    }) !== !1 && (t.preventDefault(), this.$action = r, this.style.willChange = "transform");
-  }
-  $handlePointerMove(t) {
-    const { $action: e, $pointers: s } = this;
-    if (this.disabled || e === P || s.size === 0 || this.$emit(fe, {
-      action: e,
-      relatedEvent: t
-    }) === !1)
-      return;
-    if (t.preventDefault(), t.changedTouches)
-      Array.from(t.changedTouches).forEach(({ identifier: n, pageX: r, pageY: a }) => {
-        const l = s.get(n);
-        l && Object.assign(l, {
-          endX: r,
-          endY: a
-        });
-      });
-    else {
-      const { pointerId: n = 0, pageX: r, pageY: a } = t, l = s.get(n);
-      l && Object.assign(l, {
-        endX: r,
-        endY: a
-      });
-    }
-    const i = {
-      action: e,
-      relatedEvent: t
-    };
-    if (e === it) {
-      const n = new Map(s);
-      let r = 0, a = 0, l = 0, c = 0, h = t.pageX, u = t.pageY;
-      s.forEach((d, S) => {
-        n.delete(S), n.forEach((E) => {
-          let m = E.startX - d.startX, C = E.startY - d.startY, p = E.endX - d.endX, b = E.endY - d.endY, w = 0, A = 0, k = 0, x = 0;
-          if (m === 0 ? C < 0 ? k = Math.PI * 2 : C > 0 && (k = Math.PI) : m > 0 ? k = Math.PI / 2 + Math.atan(C / m) : m < 0 && (k = Math.PI * 1.5 + Math.atan(C / m)), p === 0 ? b < 0 ? x = Math.PI * 2 : b > 0 && (x = Math.PI) : p > 0 ? x = Math.PI / 2 + Math.atan(b / p) : p < 0 && (x = Math.PI * 1.5 + Math.atan(b / p)), x > 0 || k > 0) {
-            const O = x - k, N = Math.abs(O);
-            N > r && (r = N, l = O, h = (d.startX + E.startX) / 2, u = (d.startY + E.startY) / 2);
-          }
-          if (m = Math.abs(m), C = Math.abs(C), p = Math.abs(p), b = Math.abs(b), m > 0 && C > 0 ? w = Math.sqrt(m * m + C * C) : m > 0 ? w = m : C > 0 && (w = C), p > 0 && b > 0 ? A = Math.sqrt(p * p + b * b) : p > 0 ? A = p : b > 0 && (A = b), w > 0 && A > 0) {
-            const O = (A - w) / w, N = Math.abs(O);
-            N > a && (a = N, c = O, h = (d.startX + E.startX) / 2, u = (d.startY + E.startY) / 2);
-          }
-        });
-      });
-      const $ = r > 0, g = a > 0;
-      $ && g ? (i.rotate = l, i.scale = c, i.centerX = h, i.centerY = u) : $ ? (i.action = mt, i.rotate = l, i.centerX = h, i.centerY = u) : g ? (i.action = Z, i.scale = c, i.centerX = h, i.centerY = u) : i.action = P;
-    } else {
-      const [n] = Array.from(s.values());
-      Object.assign(i, n);
-    }
-    s.forEach((n) => {
-      n.startX = n.endX, n.startY = n.endY;
-    }), i.action !== P && this.$emit(K, i, {
-      cancelable: !1
-    });
-  }
-  $handlePointerUp(t) {
-    const { $action: e, $pointers: s } = this;
-    if (!(this.disabled || e === P) && this.$emit(L, {
-      action: e,
-      relatedEvent: t
-    }) !== !1) {
-      if (t.preventDefault(), t.changedTouches)
-        Array.from(t.changedTouches).forEach(({ identifier: i }) => {
-          s.delete(i);
-        });
-      else {
-        const { pointerId: i = 0 } = t;
-        s.delete(i);
-      }
-      s.size === 0 && (this.style.willChange = "", this.$action = P);
-    }
-  }
-  $handleWheel(t) {
-    if (this.disabled || (t.preventDefault(), this.$wheeling))
-      return;
-    this.$wheeling = !0, setTimeout(() => {
-      this.$wheeling = !1;
-    }, 50);
-    const s = (t.deltaY > 0 ? -1 : 1) * this.scaleStep;
-    this.$emit(K, {
-      action: Z,
-      scale: s,
-      relatedEvent: t
-    }, {
-      cancelable: !1
-    });
-  }
-  /**
-   * Changes the current action to a new one.
-   * @param {string} action The new action.
-   * @returns {CropperCanvas} Returns `this` for chaining.
-   */
-  $setAction(t) {
-    return $e(t) && (this.$action = t), this;
-  }
-  /**
-   * Generates a real canvas element, with the image draw into if there is one.
-   * @param {object} [options] The available options.
-   * @param {number} [options.width] The width of the canvas.
-   * @param {number} [options.height] The height of the canvas.
-   * @param {Function} [options.beforeDraw] The function called before drawing the image onto the canvas.
-   * @returns {Promise} Returns a promise that resolves to the generated canvas element.
-   */
-  $toCanvas(t) {
-    return new Promise((e, s) => {
-      if (!this.isConnected) {
-        s(new Error("The current element is not connected to the DOM."));
-        return;
-      }
-      const i = document.createElement("canvas");
-      let n = this.offsetWidth, r = this.offsetHeight, a = 1;
-      nt(t) && (T(t.width) || T(t.height)) && ({ width: n, height: r } = et({
-        aspectRatio: n / r,
-        width: t.width,
-        height: t.height
-      }), a = n / this.offsetWidth), i.width = n, i.height = r;
-      const l = this.querySelector(this.$getTagNameOf(ot));
-      if (!l) {
-        e(i);
-        return;
-      }
-      l.$ready().then((c) => {
-        const h = i.getContext("2d");
-        if (h) {
-          const [u, $, g, d, S, E] = l.$getTransform();
-          let m = S, C = E, p = c.naturalWidth, b = c.naturalHeight;
-          a !== 1 && (m *= a, C *= a, p *= a, b *= a);
-          const w = p / 2, A = b / 2;
-          h.fillStyle = "transparent", h.fillRect(0, 0, n, r), nt(t) && vt(t.beforeDraw) && t.beforeDraw.call(this, h, i), h.save(), h.translate(w, A), h.transform(u, $, g, d, m, C), h.translate(-w, -A), h.drawImage(c, 0, 0, p, b), h.restore();
-        }
-        e(i);
-      }).catch(s);
-    });
-  }
-}
-rt.$name = J;
-rt.$version = "2.0.0-rc.2";
-var ke = ":host{display:inline-block}img{display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}";
-const Ht = /* @__PURE__ */ new WeakMap(), Yt = [
-  "alt",
-  "crossorigin",
-  "decoding",
-  "importance",
-  "loading",
-  "referrerpolicy",
-  "sizes",
-  "src",
-  "srcset"
-];
-class ht extends I {
-  constructor() {
-    super(...arguments), this.$matrix = [1, 0, 0, 1, 0, 0], this.$onLoad = null, this.$onCanvasAction = null, this.$onCanvasActionEnd = null, this.$onCanvasActionStart = null, this.$actionStartTarget = null, this.$style = ke, this.$image = new Image(), this.initialCenterSize = "contain", this.rotatable = !1, this.scalable = !1, this.skewable = !1, this.slottable = !1, this.translatable = !1;
-  }
-  set $canvas(t) {
-    Ht.set(this, t);
-  }
-  get $canvas() {
-    return Ht.get(this);
-  }
-  static get observedAttributes() {
-    return super.observedAttributes.concat(Yt, [
-      "initial-center-size",
-      "rotatable",
-      "scalable",
-      "skewable",
-      "translatable"
-    ]);
-  }
-  attributeChangedCallback(t, e, s) {
-    Object.is(s, e) || (super.attributeChangedCallback(t, e, s), Yt.includes(t) && this.$image.setAttribute(t, s));
-  }
-  $propertyChangedCallback(t, e, s) {
-    if (!Object.is(s, e))
-      switch (super.$propertyChangedCallback(t, e, s), t) {
-        case "initialCenterSize":
-          this.$nextTick(() => {
-            this.$center(s);
-          });
-          break;
-      }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const { $image: t } = this, e = this.closest(this.$getTagNameOf(J));
-    e && (this.$canvas = e, this.$setStyles({
-      // Make it a block element to avoid side effects (#1074).
-      display: "block",
-      position: "absolute"
-    }), this.$onCanvasActionStart = (s) => {
-      var i, n;
-      this.$actionStartTarget = (n = (i = s.detail) === null || i === void 0 ? void 0 : i.relatedEvent) === null || n === void 0 ? void 0 : n.target;
-    }, this.$onCanvasActionEnd = () => {
-      this.$actionStartTarget = null;
-    }, this.$onCanvasAction = this.$handleAction.bind(this), y(e, U, this.$onCanvasActionStart), y(e, L, this.$onCanvasActionEnd), y(e, K, this.$onCanvasAction)), this.$onLoad = this.$handleLoad.bind(this), y(t, j, this.$onLoad), this.$getShadowRoot().appendChild(t);
-  }
-  disconnectedCallback() {
-    const { $image: t, $canvas: e } = this;
-    e && (this.$onCanvasActionStart && (v(e, U, this.$onCanvasActionStart), this.$onCanvasActionStart = null), this.$onCanvasActionEnd && (v(e, L, this.$onCanvasActionEnd), this.$onCanvasActionEnd = null), this.$onCanvasAction && (v(e, K, this.$onCanvasAction), this.$onCanvasAction = null)), t && this.$onLoad && (v(t, j, this.$onLoad), this.$onLoad = null), this.$getShadowRoot().removeChild(t), super.disconnectedCallback();
-  }
-  $handleLoad() {
-    const { $image: t } = this;
-    this.$setStyles({
-      width: t.naturalWidth,
-      height: t.naturalHeight
-    }), this.$canvas && this.$center(this.initialCenterSize);
-  }
-  $handleAction(t) {
-    if (this.hidden || !(this.rotatable || this.scalable || this.translatable))
-      return;
-    const { $canvas: e } = this, { detail: s } = t;
-    if (s) {
-      const { relatedEvent: i } = s;
-      let { action: n } = s;
-      switch (n === it && (!this.rotatable || !this.scalable) && (this.rotatable ? n = mt : this.scalable ? n = Z : n = P), n) {
-        case Vt:
-          if (this.translatable) {
-            let r = null;
-            i && (r = i.target.closest(this.$getTagNameOf(z))), r || (r = e.querySelector(this.$getTagNameOf(z))), r && r.multiple && !r.active && (r = e.querySelector(`${this.$getTagNameOf(z)}[active]`)), (!r || r.hidden || !r.movable || r.dynamic || !(this.$actionStartTarget && r.contains(this.$actionStartTarget))) && this.$move(s.endX - s.startX, s.endY - s.startY);
-          }
-          break;
-        case mt:
-          if (this.rotatable)
-            if (i) {
-              const { x: r, y: a } = this.getBoundingClientRect();
-              this.$rotate(s.rotate, i.clientX - r, i.clientY - a);
-            } else
-              this.$rotate(s.rotate);
-          break;
-        case Z:
-          if (this.scalable)
-            if (i) {
-              const r = i.target.closest(this.$getTagNameOf(z));
-              if (!r || !r.zoomable || r.zoomable && r.dynamic) {
-                const { x: a, y: l } = this.getBoundingClientRect();
-                this.$zoom(s.scale, i.clientX - a, i.clientY - l);
-              }
-            } else
-              this.$zoom(s.scale);
-          break;
-        case it:
-          if (this.rotatable && this.scalable) {
-            const { rotate: r } = s;
-            let { scale: a } = s;
-            a < 0 ? a = 1 / (1 - a) : a += 1;
-            const l = Math.cos(r), c = Math.sin(r), [h, u, $, g] = [
-              l * a,
-              c * a,
-              -c * a,
-              l * a
-            ];
-            if (i) {
-              const d = this.getBoundingClientRect(), S = i.clientX - d.x, E = i.clientY - d.y, [m, C, p, b] = this.$matrix, w = d.width / 2, A = d.height / 2, k = S - w, x = E - A, O = (k * b - p * x) / (m * b - p * C), N = (x * m - C * k) / (m * b - p * C);
-              this.$transform(h, u, $, g, O * (1 - h) + N * $, N * (1 - g) + O * u);
-            } else
-              this.$transform(h, u, $, g, 0, 0);
-          }
-          break;
-      }
-    }
-  }
-  /**
-   * Defers the callback to execute after successfully loading the image.
-   * @param {Function} [callback] The callback to execute after successfully loading the image.
-   * @returns {Promise} Returns a promise that resolves to the image element.
-   */
-  $ready(t) {
-    const { $image: e } = this, s = new Promise((i, n) => {
-      const r = new Error("Failed to load the image source");
-      if (e.complete)
-        e.naturalWidth > 0 && e.naturalHeight > 0 ? i(e) : n(r);
-      else {
-        const a = () => {
-          v(e, xt, l), i(e);
-        }, l = () => {
-          v(e, j, a), n(r);
-        };
-        Pt(e, j, a), Pt(e, xt, l);
-      }
-    });
-    return vt(t) && s.then((i) => (t(i), i)), s;
-  }
-  /**
-   * Aligns the image to the center of its parent element.
-   * @param {string} [size] The size of the image.
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $center(t) {
-    const { parentElement: e } = this;
-    if (!e)
-      return this;
-    const s = e.getBoundingClientRect(), i = s.width, n = s.height, { x: r, y: a, width: l, height: c } = this.getBoundingClientRect(), h = r + l / 2, u = a + c / 2, $ = s.x + i / 2, g = s.y + n / 2;
-    if (this.$move($ - h, g - u), t && (l !== i || c !== n)) {
-      const d = i / l, S = n / c;
-      switch (t) {
-        case "cover":
-          this.$scale(Math.max(d, S));
-          break;
-        case "contain":
-          this.$scale(Math.min(d, S));
-          break;
-      }
-    }
-    return this;
-  }
-  /**
-   * Moves the image.
-   * @param {number} x The moving distance in the horizontal direction.
-   * @param {number} [y] The moving distance in the vertical direction.
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $move(t, e = t) {
-    if (this.translatable && f(t) && f(e)) {
-      const [s, i, n, r] = this.$matrix, a = (t * r - n * e) / (s * r - n * i), l = (e * s - i * t) / (s * r - n * i);
-      this.$translate(a, l);
-    }
-    return this;
-  }
-  /**
-   * Moves the image to a specific position.
-   * @param {number} x The new position in the horizontal direction.
-   * @param {number} [y] The new position in the vertical direction.
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $moveTo(t, e = t) {
-    if (this.translatable && f(t) && f(e)) {
-      const [s, i, n, r] = this.$matrix, a = (t * r - n * e) / (s * r - n * i), l = (e * s - i * t) / (s * r - n * i);
-      this.$setTransform(s, i, n, r, a, l);
-    }
-    return this;
-  }
-  /**
-   * Rotates the image.
-   * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate}
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate}
-   * @param {number|string} angle The rotation angle (in radians).
-   * @param {number} [x] The rotation origin in the horizontal, defaults to the center of the image.
-   * @param {number} [y] The rotation origin in the vertical, defaults to the center of the image.
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $rotate(t, e, s) {
-    if (this.rotatable) {
-      const i = gt(t), n = Math.cos(i), r = Math.sin(i), [a, l, c, h] = [n, r, -r, n];
-      if (f(e) && f(s)) {
-        const [u, $, g, d] = this.$matrix, { width: S, height: E } = this.getBoundingClientRect(), m = S / 2, C = E / 2, p = e - m, b = s - C, w = (p * d - g * b) / (u * d - g * $), A = (b * u - $ * p) / (u * d - g * $);
-        this.$transform(a, l, c, h, w * (1 - a) - A * c, A * (1 - h) - w * l);
-      } else
-        this.$transform(a, l, c, h, 0, 0);
-    }
-    return this;
-  }
-  /**
-   * Zooms the image.
-   * @param {number} scale The zoom factor. Positive numbers for zooming in, and negative numbers for zooming out.
-   * @param {number} [x] The zoom origin in the horizontal, defaults to the center of the image.
-   * @param {number} [y] The zoom origin in the vertical, defaults to the center of the image.
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $zoom(t, e, s) {
-    if (!this.scalable || t === 0)
-      return this;
-    if (t < 0 ? t = 1 / (1 - t) : t += 1, f(e) && f(s)) {
-      const [i, n, r, a] = this.$matrix, { width: l, height: c } = this.getBoundingClientRect(), h = l / 2, u = c / 2, $ = e - h, g = s - u, d = ($ * a - r * g) / (i * a - r * n), S = (g * i - n * $) / (i * a - r * n);
-      this.$transform(t, 0, 0, t, d * (1 - t), S * (1 - t));
-    } else
-      this.$scale(t);
-    return this;
-  }
-  /**
-   * Scales the image.
-   * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale}
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale}
-   * @param {number} x The scaling factor in the horizontal direction.
-   * @param {number} [y] The scaling factor in the vertical direction.
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $scale(t, e = t) {
-    return this.scalable && this.$transform(t, 0, 0, e, 0, 0), this;
-  }
-  /**
-   * Skews the image.
-   * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew}
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform}
-   * @param {number|string} x The skewing angle in the horizontal direction.
-   * @param {number|string} [y] The skewing angle in the vertical direction.
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $skew(t, e = 0) {
-    if (this.skewable) {
-      const s = gt(t), i = gt(e);
-      this.$transform(1, Math.tan(i), Math.tan(s), 1, 0, 0);
-    }
-    return this;
-  }
-  /**
-   * Translates the image.
-   * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate}
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate}
-   * @param {number} x The translating distance in the horizontal direction.
-   * @param {number} [y] The translating distance in the vertical direction.
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $translate(t, e = t) {
-    return this.translatable && f(t) && f(e) && this.$transform(1, 0, 0, 1, t, e), this;
-  }
-  /**
-   * Transforms the image.
-   * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix}
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform}
-   * @param {number} a The scaling factor in the horizontal direction.
-   * @param {number} b The skewing angle in the vertical direction.
-   * @param {number} c The skewing angle in the horizontal direction.
-   * @param {number} d The scaling factor in the vertical direction.
-   * @param {number} e The translating distance in the horizontal direction.
-   * @param {number} f The translating distance in the vertical direction.
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $transform(t, e, s, i, n, r) {
-    return f(t) && f(e) && f(s) && f(i) && f(n) && f(r) ? this.$setTransform(se(this.$matrix, [t, e, s, i, n, r])) : this;
-  }
-  /**
-   * Resets (overrides) the current transform to the specific identity matrix.
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform}
-   * @param {number|Array} a The scaling factor in the horizontal direction.
-   * @param {number} b The skewing angle in the vertical direction.
-   * @param {number} c The skewing angle in the horizontal direction.
-   * @param {number} d The scaling factor in the vertical direction.
-   * @param {number} e The translating distance in the horizontal direction.
-   * @param {number} f The translating distance in the vertical direction.
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $setTransform(t, e, s, i, n, r) {
-    if ((this.rotatable || this.scalable || this.skewable || this.translatable) && (Array.isArray(t) && ([t, e, s, i, n, r] = t), f(t) && f(e) && f(s) && f(i) && f(n) && f(r))) {
-      const a = [...this.$matrix], l = [t, e, s, i, n, r];
-      if (this.$emit(pt, {
-        matrix: l,
-        oldMatrix: a
-      }) === !1)
-        return this;
-      this.$matrix = l, this.style.transform = `matrix(${l.join(", ")})`;
-    }
-    return this;
-  }
-  /**
-   * Retrieves the current transformation matrix being applied to the element.
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform}
-   * @returns {Array} Returns the readonly transformation matrix.
-   */
-  $getTransform() {
-    return this.$matrix.slice();
-  }
-  /**
-   * Resets the current transform to the initial identity matrix.
-   * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/resetTransform}
-   * @returns {CropperImage} Returns `this` for chaining.
-   */
-  $resetTransform() {
-    return this.$setTransform([1, 0, 0, 1, 0, 0]);
-  }
-}
-ht.$name = ot;
-ht.$version = "2.0.0-rc.2";
-var xe = ":host{display:block;height:0;left:0;outline:var(--theme-color) solid 1px;position:relative;top:0;width:0}:host([transparent]){outline-color:transparent}";
-const Bt = /* @__PURE__ */ new WeakMap();
-class ct extends I {
-  constructor() {
-    super(...arguments), this.$onCanvasChange = null, this.$onCanvasActionEnd = null, this.$onCanvasActionStart = null, this.$style = xe, this.x = 0, this.y = 0, this.width = 0, this.height = 0, this.slottable = !1, this.themeColor = "rgba(0, 0, 0, 0.65)";
-  }
-  set $canvas(t) {
-    Bt.set(this, t);
-  }
-  get $canvas() {
-    return Bt.get(this);
-  }
-  static get observedAttributes() {
-    return super.observedAttributes.concat([
-      "height",
-      "width",
-      "x",
-      "y"
-    ]);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const t = this.closest(this.$getTagNameOf(J));
-    if (t) {
-      this.$canvas = t, this.style.position = "absolute";
-      const e = t.querySelector(this.$getTagNameOf(z));
-      e && (this.$onCanvasActionStart = (s) => {
-        e.hidden && s.detail.action === st && (this.hidden = !1);
-      }, this.$onCanvasActionEnd = (s) => {
-        e.hidden && s.detail.action === st && (this.hidden = !0);
-      }, this.$onCanvasChange = (s) => {
-        const { x: i, y: n, width: r, height: a } = s.detail;
-        this.$change(i, n, r, a), (e.hidden || i === 0 && n === 0 && r === 0 && a === 0) && (this.hidden = !0);
-      }, y(t, U, this.$onCanvasActionStart), y(t, L, this.$onCanvasActionEnd), y(t, M, this.$onCanvasChange));
-    }
-    this.$render();
-  }
-  disconnectedCallback() {
-    const { $canvas: t } = this;
-    t && (this.$onCanvasActionStart && (v(t, U, this.$onCanvasActionStart), this.$onCanvasActionStart = null), this.$onCanvasActionEnd && (v(t, L, this.$onCanvasActionEnd), this.$onCanvasActionEnd = null), this.$onCanvasChange && (v(t, M, this.$onCanvasChange), this.$onCanvasChange = null)), super.disconnectedCallback();
-  }
-  /**
-   * Changes the position and/or size of the shade.
-   * @param {number} x The new position in the horizontal direction.
-   * @param {number} y The new position in the vertical direction.
-   * @param {number} [width] The new width.
-   * @param {number} [height] The new height.
-   * @returns {CropperShade} Returns `this` for chaining.
-   */
-  $change(t, e, s = this.width, i = this.height) {
-    return !f(t) || !f(e) || !f(s) || !f(i) || t === this.x && e === this.y && s === this.width && i === this.height ? this : (this.hidden && (this.hidden = !1), this.x = t, this.y = e, this.width = s, this.height = i, this.$render());
-  }
-  /**
-   * Resets the shade to its initial position and size.
-   * @returns {CropperShade} Returns `this` for chaining.
-   */
-  $reset() {
-    return this.$change(0, 0, 0, 0);
-  }
-  /**
-   * Refreshes the position or size of the shade.
-   * @returns {CropperShade} Returns `this` for chaining.
-   */
-  $render() {
-    return this.$setStyles({
-      transform: `translate(${this.x}px, ${this.y}px)`,
-      width: this.width,
-      height: this.height,
-      outlineWidth: R.innerWidth
-    });
-  }
-}
-ct.$name = re;
-ct.$version = "2.0.0-rc.2";
-var Oe = ':host{background-color:var(--theme-color);display:block}:host([action=move]),:host([action=select]){height:100%;left:0;position:absolute;top:0;width:100%}:host([action=move]){cursor:move}:host([action=select]){cursor:crosshair}:host([action$=-resize]){background-color:transparent;height:15px;position:absolute;width:15px}:host([action$=-resize]):after{background-color:var(--theme-color);content:"";display:block;height:5px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px}:host([action=n-resize]),:host([action=s-resize]){cursor:ns-resize;left:50%;transform:translateX(-50%);width:100%}:host([action=n-resize]){top:-8px}:host([action=s-resize]){bottom:-8px}:host([action=e-resize]),:host([action=w-resize]){cursor:ew-resize;height:100%;top:50%;transform:translateY(-50%)}:host([action=e-resize]){right:-8px}:host([action=w-resize]){left:-8px}:host([action=ne-resize]){cursor:nesw-resize;right:-8px;top:-8px}:host([action=nw-resize]){cursor:nwse-resize;left:-8px;top:-8px}:host([action=se-resize]){bottom:-8px;cursor:nwse-resize;right:-8px}:host([action=se-resize]):after{height:15px;width:15px}@media (pointer:coarse){:host([action=se-resize]):after{height:10px;width:10px}}@media (pointer:fine){:host([action=se-resize]):after{height:5px;width:5px}}:host([action=sw-resize]){bottom:-8px;cursor:nesw-resize;left:-8px}:host([plain]){background-color:transparent}';
-class lt extends I {
-  constructor() {
-    super(...arguments), this.$onCanvasCropEnd = null, this.$onCanvasCropStart = null, this.$style = Oe, this.action = P, this.plain = !1, this.slottable = !1, this.themeColor = "rgba(51, 153, 255, 0.5)";
-  }
-  static get observedAttributes() {
-    return super.observedAttributes.concat([
-      "action",
-      "plain"
-    ]);
-  }
-}
-lt.$name = oe;
-lt.$version = "2.0.0-rc.2";
-var Ne = ':host{display:block;left:0;position:relative;right:0}:host([outlined]){outline:1px solid var(--theme-color)}:host([multiple]){outline:1px dashed hsla(0,0%,100%,.5)}:host([multiple]):after{bottom:0;content:"";cursor:pointer;display:block;left:0;position:absolute;right:0;top:0}:host([multiple][active]){outline-color:var(--theme-color);z-index:1}:host([multiple])>*{visibility:hidden}:host([multiple][active])>*{visibility:visible}:host([multiple][active]):after{display:none}';
-const Lt = /* @__PURE__ */ new WeakMap();
-class dt extends I {
-  constructor() {
-    super(...arguments), this.$onCanvasAction = null, this.$onCanvasActionStart = null, this.$onCanvasActionEnd = null, this.$onDocumentKeyDown = null, this.$action = "", this.$actionStartTarget = null, this.$changing = !1, this.$style = Ne, this.$initialSelection = {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    }, this.x = 0, this.y = 0, this.width = 0, this.height = 0, this.aspectRatio = NaN, this.initialAspectRatio = NaN, this.initialCoverage = NaN, this.active = !1, this.linked = !1, this.dynamic = !1, this.movable = !1, this.resizable = !1, this.zoomable = !1, this.multiple = !1, this.keyboard = !1, this.outlined = !1, this.precise = !1;
-  }
-  set $canvas(t) {
-    Lt.set(this, t);
-  }
-  get $canvas() {
-    return Lt.get(this);
-  }
-  static get observedAttributes() {
-    return super.observedAttributes.concat([
-      "active",
-      "aspect-ratio",
-      "dynamic",
-      "height",
-      "initial-aspect-ratio",
-      "initial-coverage",
-      "keyboard",
-      "linked",
-      "movable",
-      "multiple",
-      "outlined",
-      "precise",
-      "resizable",
-      "width",
-      "x",
-      "y",
-      "zoomable"
-    ]);
-  }
-  $propertyChangedCallback(t, e, s) {
-    if (!Object.is(s, e))
-      switch (super.$propertyChangedCallback(t, e, s), t) {
-        case "x":
-        case "y":
-        case "width":
-        case "height":
-          this.$changing || this.$nextTick(() => {
-            this.$change(this.x, this.y, this.width, this.height, this.aspectRatio, !0);
-          });
-          break;
-        case "aspectRatio":
-        case "initialAspectRatio":
-          this.$nextTick(() => {
-            this.$initSelection();
-          });
-          break;
-        case "initialCoverage":
-          this.$nextTick(() => {
-            T(s) && s <= 1 && this.$initSelection(!0, !0);
-          });
-          break;
-        case "keyboard":
-          this.$nextTick(() => {
-            this.$canvas && (s ? this.$onDocumentKeyDown || (this.$onDocumentKeyDown = this.$handleKeyDown.bind(this), y(this.ownerDocument, Ot, this.$onDocumentKeyDown)) : this.$onDocumentKeyDown && (v(this.ownerDocument, Ot, this.$onDocumentKeyDown), this.$onDocumentKeyDown = null));
-          });
-          break;
-        case "multiple":
-          this.$nextTick(() => {
-            if (this.$canvas) {
-              const i = this.$getSelections();
-              s ? (i.forEach((n) => {
-                n.active = !1;
-              }), this.active = !0, this.$emit(M, {
-                x: this.x,
-                y: this.y,
-                width: this.width,
-                height: this.height
-              })) : (this.active = !1, i.slice(1).forEach((n) => {
-                this.$removeSelection(n);
-              }));
-            }
-          });
-          break;
-        case "precise":
-          this.$nextTick(() => {
-            this.$change(this.x, this.y);
-          });
-          break;
-        // Backwards compatible with 2.0.0-rc
-        case "linked":
-          s && (this.dynamic = !0);
-          break;
-      }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const t = this.closest(this.$getTagNameOf(J));
-    t ? (this.$canvas = t, this.$setStyles({
-      position: "absolute",
-      transform: `translate(${this.x}px, ${this.y}px)`
-    }), this.hidden || this.$render(), this.$initSelection(!0), this.$onCanvasActionStart = this.$handleActionStart.bind(this), this.$onCanvasActionEnd = this.$handleActionEnd.bind(this), this.$onCanvasAction = this.$handleAction.bind(this), y(t, U, this.$onCanvasActionStart), y(t, L, this.$onCanvasActionEnd), y(t, K, this.$onCanvasAction)) : this.$render();
-  }
-  disconnectedCallback() {
-    const { $canvas: t } = this;
-    t && (this.$onCanvasActionStart && (v(t, U, this.$onCanvasActionStart), this.$onCanvasActionStart = null), this.$onCanvasActionEnd && (v(t, L, this.$onCanvasActionEnd), this.$onCanvasActionEnd = null), this.$onCanvasAction && (v(t, K, this.$onCanvasAction), this.$onCanvasAction = null)), super.disconnectedCallback();
-  }
-  $getSelections() {
-    let t = [];
-    return this.parentElement && (t = Array.from(this.parentElement.querySelectorAll(this.$getTagNameOf(z)))), t;
-  }
-  $initSelection(t = !1, e = !1) {
-    const { initialCoverage: s, parentElement: i } = this;
-    if (T(s) && i) {
-      const n = this.aspectRatio || this.initialAspectRatio;
-      let r = (e ? 0 : this.width) || i.offsetWidth * s, a = (e ? 0 : this.height) || i.offsetHeight * s;
-      T(n) && ({ width: r, height: a } = et({ aspectRatio: n, width: r, height: a })), this.$change(this.x, this.y, r, a), t && this.$center(), this.$initialSelection = {
-        x: this.x,
-        y: this.y,
-        width: this.width,
-        height: this.height
-      };
-    }
-  }
-  $createSelection() {
-    const t = this.cloneNode(!0);
-    return this.hasAttribute("id") && t.removeAttribute("id"), t.initialCoverage = NaN, this.active = !1, this.parentElement && this.parentElement.insertBefore(t, this.nextSibling), t;
-  }
-  $removeSelection(t = this) {
-    if (this.parentElement) {
-      const e = this.$getSelections();
-      if (e.length > 1) {
-        const s = e.indexOf(t), i = e[s + 1] || e[s - 1];
-        i && (t.active = !1, this.parentElement.removeChild(t), i.active = !0, i.$emit(M, {
-          x: i.x,
-          y: i.y,
-          width: i.width,
-          height: i.height
-        }));
-      } else
-        this.$clear();
-    }
-  }
-  $handleActionStart(t) {
-    var e, s;
-    const i = (s = (e = t.detail) === null || e === void 0 ? void 0 : e.relatedEvent) === null || s === void 0 ? void 0 : s.target;
-    this.$action = "", this.$actionStartTarget = i, !this.hidden && this.multiple && !this.active && i === this && this.parentElement && (this.$getSelections().forEach((n) => {
-      n.active = !1;
-    }), this.active = !0, this.$emit(M, {
-      x: this.x,
-      y: this.y,
-      width: this.width,
-      height: this.height
-    }));
-  }
-  $handleAction(t) {
-    const { currentTarget: e, detail: s } = t;
-    if (!e || !s)
-      return;
-    const { relatedEvent: i } = s;
-    let { action: n } = s;
-    if (!n && this.multiple && (n = this.$action || (i == null ? void 0 : i.target.action), this.$action = n), !n || this.hidden && n !== st || this.multiple && !this.active && n !== Z)
-      return;
-    const r = s.endX - s.startX, a = s.endY - s.startY, { width: l, height: c } = this;
-    let { aspectRatio: h } = this;
-    switch (!T(h) && i.shiftKey && (h = T(l) && T(c) ? l / c : 1), n) {
-      case st:
-        if (r !== 0 && a !== 0) {
-          const { $canvas: u } = this, $ = Mt(e);
-          (this.multiple && !this.hidden ? this.$createSelection() : this).$change(s.startX - $.left, s.startY - $.top, Math.abs(r), Math.abs(a), h), r < 0 ? a < 0 ? n = F : a > 0 && (n = V) : r > 0 && (a < 0 ? n = G : a > 0 && (n = q)), u && (u.$action = n);
-        }
-        break;
-      case Vt:
-        this.movable && (this.dynamic || this.$actionStartTarget && this.contains(this.$actionStartTarget)) && this.$move(r, a);
-        break;
-      case Z:
-        if (i && this.zoomable && (this.dynamic || this.contains(i.target))) {
-          const u = Mt(e);
-          this.$zoom(s.scale, i.pageX - u.left, i.pageY - u.top);
-        }
-        break;
-      default:
-        this.$resize(n, r, a, h);
-    }
-  }
-  $handleActionEnd() {
-    this.$action = "", this.$actionStartTarget = null;
-  }
-  $handleKeyDown(t) {
-    if (this.hidden || !this.keyboard || this.multiple && !this.active || t.defaultPrevented)
-      return;
-    const { activeElement: e } = document;
-    if (!(e && (["INPUT", "TEXTAREA"].includes(e.tagName) || ["true", "plaintext-only"].includes(e.contentEditable))))
-      switch (t.key) {
-        case "Backspace":
-          t.metaKey && (t.preventDefault(), this.$removeSelection());
-          break;
-        case "Delete":
-          t.preventDefault(), this.$removeSelection();
-          break;
-        // Move to the left
-        case "ArrowLeft":
-          t.preventDefault(), this.$move(-1, 0);
-          break;
-        // Move to the right
-        case "ArrowRight":
-          t.preventDefault(), this.$move(1, 0);
-          break;
-        // Move to the top
-        case "ArrowUp":
-          t.preventDefault(), this.$move(0, -1);
-          break;
-        // Move to the bottom
-        case "ArrowDown":
-          t.preventDefault(), this.$move(0, 1);
-          break;
-        case "+":
-          t.preventDefault(), this.$zoom(0.1);
-          break;
-        case "-":
-          t.preventDefault(), this.$zoom(-0.1);
-          break;
-      }
-  }
-  /**
-   * Aligns the selection to the center of its parent element.
-   * @returns {CropperSelection} Returns `this` for chaining.
-   */
-  $center() {
-    const { parentElement: t } = this;
-    if (!t)
-      return this;
-    const e = (t.offsetWidth - this.width) / 2, s = (t.offsetHeight - this.height) / 2;
-    return this.$change(e, s);
-  }
-  /**
-   * Moves the selection.
-   * @param {number} x The moving distance in the horizontal direction.
-   * @param {number} [y] The moving distance in the vertical direction.
-   * @returns {CropperSelection} Returns `this` for chaining.
-   */
-  $move(t, e = t) {
-    return this.$moveTo(this.x + t, this.y + e);
-  }
-  /**
-   * Moves the selection to a specific position.
-   * @param {number} x The new position in the horizontal direction.
-   * @param {number} [y] The new position in the vertical direction.
-   * @returns {CropperSelection} Returns `this` for chaining.
-   */
-  $moveTo(t, e = t) {
-    return this.movable ? this.$change(t, e) : this;
-  }
-  /**
-   * Adjusts the size the selection on a specific side or corner.
-   * @param {string} action Indicates the side or corner to resize.
-   * @param {number} [offsetX] The horizontal offset of the specific side or corner.
-   * @param {number} [offsetY] The vertical offset of the specific side or corner.
-   * @param {number} [aspectRatio] The aspect ratio for computing the new size if it is necessary.
-   * @returns {CropperSelection} Returns `this` for chaining.
-   */
-  $resize(t, e = 0, s = 0, i = this.aspectRatio) {
-    if (!this.resizable)
-      return this;
-    const n = T(i), { $canvas: r } = this;
-    let { x: a, y: l, width: c, height: h } = this;
-    switch (t) {
-      case yt:
-        l += s, h -= s, h < 0 && (t = wt, h = -h, l -= h), n && (e = s * i, a += e / 2, c -= e, c < 0 && (c = -c, a -= c));
-        break;
-      case Et:
-        c += e, c < 0 && (t = St, c = -c, a -= c), n && (s = e / i, l -= s / 2, h += s, h < 0 && (h = -h, l -= h));
-        break;
-      case wt:
-        h += s, h < 0 && (t = yt, h = -h, l -= h), n && (e = s * i, a -= e / 2, c += e, c < 0 && (c = -c, a -= c));
-        break;
-      case St:
-        a += e, c -= e, c < 0 && (t = Et, c = -c, a -= c), n && (s = e / i, l += s / 2, h -= s, h < 0 && (h = -h, l -= h));
-        break;
-      case G:
-        n && (s = -e / i), l += s, h -= s, c += e, c < 0 && h < 0 ? (t = V, c = -c, h = -h, a -= c, l -= h) : c < 0 ? (t = F, c = -c, a -= c) : h < 0 && (t = q, h = -h, l -= h);
-        break;
-      case F:
-        n && (s = e / i), a += e, l += s, c -= e, h -= s, c < 0 && h < 0 ? (t = q, c = -c, h = -h, a -= c, l -= h) : c < 0 ? (t = G, c = -c, a -= c) : h < 0 && (t = V, h = -h, l -= h);
-        break;
-      case q:
-        n && (s = e / i), c += e, h += s, c < 0 && h < 0 ? (t = F, c = -c, h = -h, a -= c, l -= h) : c < 0 ? (t = V, c = -c, a -= c) : h < 0 && (t = G, h = -h, l -= h);
-        break;
-      case V:
-        n && (s = -e / i), a += e, c -= e, h += s, c < 0 && h < 0 ? (t = G, c = -c, h = -h, a -= c, l -= h) : c < 0 ? (t = q, c = -c, a -= c) : h < 0 && (t = F, h = -h, l -= h);
-        break;
-    }
-    return r && r.$setAction(t), this.$change(a, l, c, h);
-  }
-  /**
-   * Zooms the selection.
-   * @param {number} scale The zoom factor. Positive numbers for zooming in, and negative numbers for zooming out.
-   * @param {number} [x] The zoom origin in the horizontal, defaults to the center of the selection.
-   * @param {number} [y] The zoom origin in the vertical, defaults to the center of the selection.
-   * @returns {CropperSelection} Returns `this` for chaining.
-   */
-  $zoom(t, e, s) {
-    if (!this.zoomable || t === 0)
-      return this;
-    t < 0 ? t = 1 / (1 - t) : t += 1;
-    const { width: i, height: n } = this, r = i * t, a = n * t;
-    let l = this.x, c = this.y;
-    return f(e) && f(s) ? (l -= (r - i) * ((e - this.x) / i), c -= (a - n) * ((s - this.y) / n)) : (l -= (r - i) / 2, c -= (a - n) / 2), this.$change(l, c, r, a);
-  }
-  /**
-   * Changes the position and/or size of the selection.
-   * @param {number} x The new position in the horizontal direction.
-   * @param {number} y The new position in the vertical direction.
-   * @param {number} [width] The new width.
-   * @param {number} [height] The new height.
-   * @param {number} [aspectRatio] The new aspect ratio for this change only.
-   * @param {number} [_force] Force change.
-   * @returns {CropperSelection} Returns `this` for chaining.
-   */
-  $change(t, e, s = this.width, i = this.height, n = this.aspectRatio, r = !1) {
-    return this.$changing || !f(t) || !f(e) || !f(s) || !f(i) || s < 0 || i < 0 ? this : (T(n) && ({ width: s, height: i } = et({ aspectRatio: n, width: s, height: i }, "cover")), this.precise || (t = Math.round(t), e = Math.round(e), s = Math.round(s), i = Math.round(i)), t === this.x && e === this.y && s === this.width && i === this.height && Object.is(n, this.aspectRatio) && !r ? this : (this.hidden && (this.hidden = !1), this.$emit(M, {
-      x: t,
-      y: e,
-      width: s,
-      height: i
-    }) === !1 ? this : (this.$changing = !0, this.x = t, this.y = e, this.width = s, this.height = i, this.$changing = !1, this.$render())));
-  }
-  /**
-   * Resets the selection to its initial position and size.
-   * @returns {CropperSelection} Returns `this` for chaining.
-   */
-  $reset() {
-    const { x: t, y: e, width: s, height: i } = this.$initialSelection;
-    return this.$change(t, e, s, i);
-  }
-  /**
-   * Clears the selection.
-   * @returns {CropperSelection} Returns `this` for chaining.
-   */
-  $clear() {
-    return this.$change(0, 0, 0, 0, NaN, !0), this.hidden = !0, this;
-  }
-  /**
-   * Refreshes the position or size of the selection.
-   * @returns {CropperSelection} Returns `this` for chaining.
-   */
-  $render() {
-    return this.$setStyles({
-      transform: `translate(${this.x}px, ${this.y}px)`,
-      width: this.width,
-      height: this.height
-    });
-  }
-  /**
-   * Generates a real canvas element, with the image (selected area only) draw into if there is one.
-   * @param {object} [options] The available options.
-   * @param {number} [options.width] The width of the canvas.
-   * @param {number} [options.height] The height of the canvas.
-   * @param {Function} [options.beforeDraw] The function called before drawing the image onto the canvas.
-   * @returns {Promise} Returns a promise that resolves to the generated canvas element.
-   */
-  $toCanvas(t) {
-    return new Promise((e, s) => {
-      if (!this.isConnected) {
-        s(new Error("The current element is not connected to the DOM."));
-        return;
-      }
-      const i = document.createElement("canvas");
-      let { width: n, height: r } = this, a = 1;
-      if (nt(t) && (T(t.width) || T(t.height)) && ({ width: n, height: r } = et({
-        aspectRatio: n / r,
-        width: t.width,
-        height: t.height
-      }), a = n / this.width), i.width = n, i.height = r, !this.$canvas) {
-        e(i);
-        return;
-      }
-      const l = this.$canvas.querySelector(this.$getTagNameOf(ot));
-      if (!l) {
-        e(i);
-        return;
-      }
-      l.$ready().then((c) => {
-        const h = i.getContext("2d");
-        if (h) {
-          const [u, $, g, d, S, E] = l.$getTransform(), m = -this.x, C = -this.y, p = (m * d - g * C) / (u * d - g * $), b = (C * u - $ * m) / (u * d - g * $);
-          let w = u * p + g * b + S, A = $ * p + d * b + E, k = c.naturalWidth, x = c.naturalHeight;
-          a !== 1 && (w *= a, A *= a, k *= a, x *= a);
-          const O = k / 2, N = x / 2;
-          h.fillStyle = "transparent", h.fillRect(0, 0, n, r), nt(t) && vt(t.beforeDraw) && t.beforeDraw.call(this, h, i), h.save(), h.translate(O, N), h.transform(u, $, g, d, w, A), h.translate(-O, -N), h.drawImage(c, 0, 0, k, x), h.restore();
-        }
-        e(i);
-      }).catch(s);
-    });
-  }
-}
-dt.$name = z;
-dt.$version = "2.0.0-rc.2";
-var Re = ":host{display:flex;flex-direction:column;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:host([bordered]){border:1px dashed var(--theme-color)}:host([covered]){bottom:0;left:0;position:absolute;right:0;top:0}:host>span{display:flex;flex:1}:host>span+span{border-top:1px dashed var(--theme-color)}:host>span>span{flex:1}:host>span>span+span{border-left:1px dashed var(--theme-color)}";
-class ut extends I {
-  constructor() {
-    super(...arguments), this.$style = Re, this.bordered = !1, this.columns = 3, this.covered = !1, this.rows = 3, this.slottable = !1, this.themeColor = "rgba(238, 238, 238, 0.5)";
-  }
-  static get observedAttributes() {
-    return super.observedAttributes.concat([
-      "bordered",
-      "columns",
-      "covered",
-      "rows"
-    ]);
-  }
-  $propertyChangedCallback(t, e, s) {
-    Object.is(s, e) || (super.$propertyChangedCallback(t, e, s), (t === "rows" || t === "columns") && this.$nextTick(() => {
-      this.$render();
-    }));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.$render();
-  }
-  $render() {
-    const t = this.$getShadowRoot(), e = document.createDocumentFragment();
-    for (let s = 0; s < this.rows; s += 1) {
-      const i = document.createElement("span");
-      i.setAttribute("role", "row");
-      for (let n = 0; n < this.columns; n += 1) {
-        const r = document.createElement("span");
-        r.setAttribute("role", "gridcell"), i.appendChild(r);
-      }
-      e.appendChild(i);
-    }
-    t && (t.innerHTML = "", t.appendChild(e));
-  }
-}
-ut.$name = ae;
-ut.$version = "2.0.0-rc.2";
-var Ie = ':host{display:inline-block;height:1em;position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1em}:host:after,:host:before{background-color:var(--theme-color);content:"";display:block;position:absolute}:host:before{height:1px;left:0;top:50%;transform:translateY(-50%);width:100%}:host:after{height:100%;left:50%;top:0;transform:translateX(-50%);width:1px}:host([centered]){left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}';
-class ft extends I {
-  constructor() {
-    super(...arguments), this.$style = Ie, this.centered = !1, this.slottable = !1, this.themeColor = "rgba(238, 238, 238, 0.5)";
-  }
-  static get observedAttributes() {
-    return super.observedAttributes.concat([
-      "centered"
-    ]);
-  }
-}
-ft.$name = ne;
-ft.$version = "2.0.0-rc.2";
-var Pe = ":host{display:block;height:100%;overflow:hidden;position:relative;width:100%}";
-const Ut = /* @__PURE__ */ new WeakMap(), jt = /* @__PURE__ */ new WeakMap(), Zt = /* @__PURE__ */ new WeakMap(), Kt = /* @__PURE__ */ new WeakMap(), ze = "both", Me = "horizontal", Gt = "vertical", De = "none";
-class $t extends I {
-  constructor() {
-    super(...arguments), this.$onSelectionChange = null, this.$onSourceImageLoad = null, this.$onSourceImageTransform = null, this.$scale = 1, this.$style = Pe, this.resize = Gt, this.selection = "", this.slottable = !1;
-  }
-  set $image(t) {
-    jt.set(this, t);
-  }
-  get $image() {
-    return jt.get(this);
-  }
-  set $sourceImage(t) {
-    Kt.set(this, t);
-  }
-  get $sourceImage() {
-    return Kt.get(this);
-  }
-  set $canvas(t) {
-    Ut.set(this, t);
-  }
-  get $canvas() {
-    return Ut.get(this);
-  }
-  set $selection(t) {
-    Zt.set(this, t);
-  }
-  get $selection() {
-    return Zt.get(this);
-  }
-  static get observedAttributes() {
-    return super.observedAttributes.concat([
-      "resize",
-      "selection"
-    ]);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    let t = null;
-    if (this.selection ? t = this.ownerDocument.querySelector(this.selection) : t = this.closest(this.$getTagNameOf(z)), te(t)) {
-      this.$selection = t, this.$onSelectionChange = this.$handleSelectionChange.bind(this), y(t, M, this.$onSelectionChange);
-      const e = t.closest(this.$getTagNameOf(J));
-      if (e) {
-        this.$canvas = e;
-        const s = e.querySelector(this.$getTagNameOf(ot));
-        s && (this.$sourceImage = s, this.$image = s.cloneNode(!0), this.$getShadowRoot().appendChild(this.$image), this.$onSourceImageLoad = this.$handleSourceImageLoad.bind(this), this.$onSourceImageTransform = this.$handleSourceImageTransform.bind(this), y(s.$image, j, this.$onSourceImageLoad), y(s, pt, this.$onSourceImageTransform));
-      }
-      this.$render();
-    }
-  }
-  disconnectedCallback() {
-    const { $selection: t, $sourceImage: e } = this;
-    t && this.$onSelectionChange && (v(t, M, this.$onSelectionChange), this.$onSelectionChange = null), e && this.$onSourceImageLoad && (v(e.$image, j, this.$onSourceImageLoad), this.$onSourceImageLoad = null), e && this.$onSourceImageTransform && (v(e, pt, this.$onSourceImageTransform), this.$onSourceImageTransform = null), super.disconnectedCallback();
-  }
-  $handleSelectionChange(t) {
-    this.$render(t.detail);
-  }
-  $handleSourceImageLoad() {
-    const { $image: t, $sourceImage: e } = this, s = t.getAttribute("src"), i = e.getAttribute("src");
-    i && i !== s && (t.setAttribute("src", i), t.$ready(() => {
-      setTimeout(() => {
-        this.$render();
-      }, 50);
-    }));
-  }
-  $handleSourceImageTransform(t) {
-    this.$render(void 0, t.detail.matrix);
-  }
-  $render(t, e) {
-    const { $canvas: s, $selection: i } = this;
-    !t && !i.hidden && (t = i), (!t || t.x === 0 && t.y === 0 && t.width === 0 && t.height === 0) && (t = {
-      x: 0,
-      y: 0,
-      width: s.offsetWidth,
-      height: s.offsetHeight
-    });
-    const { x: n, y: r, width: a, height: l } = t, c = {}, { clientWidth: h, clientHeight: u } = this;
-    let $ = h, g = u, d = NaN;
-    switch (this.resize) {
-      case ze:
-        d = 1, $ = a, g = l, c.width = a, c.height = l;
-        break;
-      case Me:
-        d = l > 0 ? u / l : 0, $ = a * d, c.width = $;
-        break;
-      case Gt:
-        d = a > 0 ? h / a : 0, g = l * d, c.height = g;
-        break;
-      case De:
-      default:
-        h > 0 ? d = a > 0 ? h / a : 0 : u > 0 && (d = l > 0 ? u / l : 0);
-    }
-    this.$scale = d, this.$setStyles(c), this.$sourceImage && this.$transformImageByOffset(e ?? this.$sourceImage.$getTransform(), -n, -r);
-  }
-  $transformImageByOffset(t, e, s) {
-    const { $image: i, $scale: n, $sourceImage: r } = this;
-    if (r && i && n >= 0) {
-      const [a, l, c, h, u, $] = t, g = (e * h - c * s) / (a * h - c * l), d = (s * a - l * e) / (a * h - c * l), S = a * g + c * d + u, E = l * g + h * d + $;
-      i.$ready((m) => {
-        this.$setStyles.call(i, {
-          width: m.naturalWidth * n,
-          height: m.naturalHeight * n
-        });
-      }), i.$setTransform(a, l, c, h, S * n, E * n);
-    }
-  }
-}
-$t.$name = he;
-$t.$version = "2.0.0-rc.2";
-/*! Cropper.js v2.0.0-rc.2 | (c) 2015-present Chen Fengyuan | MIT */
-rt.$define();
-ft.$define();
-ut.$define();
-lt.$define();
-ht.$define();
-dt.$define();
-ct.$define();
-$t.$define();
-const _e = /* @__PURE__ */ D({
-  __name: "CropperCanvas",
-  props: {
-    background: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    scaleStep: { default: 0.1 },
-    themeColor: { default: "#39f" }
-  },
-  setup(o, { expose: t }) {
-    var r, a;
-    const e = ie("canvasRef");
-    rt.$define();
-    const s = _("cropper-canvas", {
-      background: o.background,
-      disabled: o.disabled,
-      scaleStep: o.scaleStep,
-      themeColor: o.themeColor,
-      style: "height: 500px"
-    }), i = (r = e.value) == null ? void 0 : r.$setAction, n = (a = e.value) == null ? void 0 : a.$toCanvas;
-    return t({
-      $setAction: i,
-      $toCanvas: n
-    }), (l, c) => (W(), X(H(Y(s)), {
-      ref_key: "canvasRef",
-      ref: e
-    }, {
-      default: Ft(() => [
-        qt(l.$slots, "default")
-      ]),
-      _: 3
-    }, 512));
-  }
-}), We = /* @__PURE__ */ D({
-  __name: "CropperImage",
-  props: {
-    src: {},
-    alt: {},
-    initialCenterSize: { default: "contain" },
-    rotatable: { type: Boolean, default: !1 },
-    scalable: { type: Boolean, default: !1 },
-    skewable: { type: Boolean, default: !1 },
-    slottable: { type: Boolean, default: !1 },
-    translatable: { type: Boolean, default: !1 }
-  },
-  setup(o) {
-    ht.$define();
-    const t = _("cropper-image", {
-      src: o.src,
-      alt: o.alt,
-      initialCenterSize: o.initialCenterSize,
-      rotatable: o.rotatable,
-      scalable: o.scalable,
-      skewable: o.skewable,
-      slottable: o.slottable,
-      translatable: o.translatable
-    });
-    return (e, s) => (W(), X(H(Y(t))));
-  }
-}), Xe = /* @__PURE__ */ D({
-  __name: "CropperShade",
-  props: {
-    x: { default: 0 },
-    y: { default: 0 },
-    width: { default: 0 },
-    height: { default: 0 },
-    slottable: { type: Boolean, default: !1 },
-    themeColor: { default: "rgba(0, 0, 0, 0.65)" },
-    hidden: { type: Boolean, default: !1 }
-  },
-  setup(o) {
-    ct.$define();
-    const t = _("cropper-shade", {
-      x: o.x,
-      y: o.y,
-      width: o.width,
-      height: o.height,
-      slottable: o.slottable,
-      themeColor: o.themeColor,
-      hidden: o.hidden
-    });
-    return (e, s) => (W(), X(H(Y(t))));
-  }
-}), He = /* @__PURE__ */ D({
-  __name: "CropperHandle",
-  props: {
-    action: { default: "none" },
-    plain: { type: Boolean, default: !1 },
-    slottable: { type: Boolean, default: !1 },
-    themeColor: { default: "rgba(51, 153, 255, 0.5)" }
-  },
-  setup(o) {
-    lt.$define();
-    const t = _("cropper-handle", { action: o.action, plain: o.plain, slottable: o.slottable, themeColor: o.themeColor });
-    return (e, s) => (W(), X(H(Y(t))));
-  }
-}), Ye = /* @__PURE__ */ D({
-  __name: "CropperSelection",
-  props: {
-    x: { default: 0 },
-    y: { default: 0 },
-    width: { default: 0 },
-    height: { default: 0 },
-    aspectRatio: {},
-    initialAspectRatio: {},
-    initialCoverage: {},
-    dynamic: { type: Boolean, default: !1 },
-    movable: { type: Boolean, default: !1 },
-    resizable: { type: Boolean, default: !1 },
-    zoomable: { type: Boolean, default: !1 },
-    multiple: { type: Boolean, default: !1 },
-    keyboard: { type: Boolean, default: !1 },
-    outlined: { type: Boolean, default: !1 },
-    precise: { type: Boolean, default: !1 }
-  },
-  setup(o) {
-    dt.$define();
-    const t = _("cropper-selection", {
-      x: o.x,
-      y: o.y,
-      width: o.width,
-      height: o.height,
-      aspectRatio: o.aspectRatio,
-      initialAspectRatio: o.initialAspectRatio,
-      initialCoverage: o.initialCoverage,
-      dynamic: o.dynamic,
-      movable: o.movable,
-      resizable: o.resizable,
-      zoomable: o.zoomable,
-      multiple: o.multiple,
-      keyboard: o.keyboard,
-      outlined: o.outlined,
-      precise: o.precise
-      //
-    });
-    return (e, s) => (W(), X(H(Y(t)), null, {
-      default: Ft(() => [
-        qt(e.$slots, "default")
-      ]),
-      _: 3
-    }));
-  }
-}), Be = /* @__PURE__ */ D({
-  __name: "CropperCrosshair",
-  props: {
-    centered: { type: Boolean, default: !1 }
-  },
-  setup(o) {
-    ft.$define();
-    const t = _("cropper-crosshair", { centered: o.centered });
-    return (e, s) => (W(), X(H(Y(t))));
-  }
-}), Le = /* @__PURE__ */ D({
-  __name: "CropperGrid",
-  props: {
-    role: { default: "grid" },
-    covered: { type: Boolean, default: !1 }
-  },
-  setup(o) {
-    ut.$define();
-    const t = _("cropper-grid", { role: o.role, covered: o.covered });
-    return (e, s) => (W(), X(H(Y(t))));
-  }
-}), Ue = /* @__PURE__ */ D({
-  __name: "CropperViewer",
-  props: {
-    resize: { default: "vertical" },
-    selection: { default: "" }
-  },
-  setup(o) {
-    $t.$define();
-    const t = _("cropper-viewer", { resize: o.resize, selection: o.selection });
-    return (e, s) => (W(), X(H(Y(t))));
-  }
-}), Ze = {
-  install: (o) => {
-    o.component("CropperCanvas", _e), o.component("CropperImage", We), o.component("CropperShade", Xe), o.component("CropperHandle", He), o.component("CropperSelection", Ye), o.component("CropperCrosshair", Be), o.component("CropperGrid", Le), o.component("CropperViewer", Ue);
-  }
-};
-export {
-  _e as CropperCanvas,
-  Be as CropperCrosshair,
-  Le as CropperGrid,
-  He as CropperHandle,
-  We as CropperImage,
-  Ye as CropperSelection,
-  Xe as CropperShade,
-  Ue as CropperViewer,
-  Ze as default
-};